Jquery頁面加載動畫

-1

我已經看過一些回答的問題，但他們都沒有工作。我試圖讓我的徽標旋轉，並在頁面加載時從頁面翻譯過來。我用CSS旋轉，但使用.animate來翻譯它。我找不到任何讓我的代碼工作Jquery頁面加載動畫

<div class="logo"> 
     </div> 


     <div class="info"> 

     </div> 
    <script> 
    $(function() { 
     $('.logo').animate(
     {left: '200px'}, 2000 
     ); 
    }); 
    </body> 

body { 
    background-image: url('images/floor.jpg'); 
    background-size: cover; 
    background-color: #000; 
    background-repeat: no-repeat; 
} 

.info { 
    background-color: #966f33; 
    width: 12%; 
    margin-left: 64%; 
    height: 100%; 
    position: absolute; 
    margin-top: -208px; 
    box-shadow: 0px 0px 35px 10px #000; 
} 

.logo { 
    background-image: url('images/logo.png'); 
    width: 220px; 
    height: 220px; 
    position: relative; 
    background-size: 100% 100%; 
    margin-top: -20px; 
    margin-left: -220px; 
    animation: rotate 2s linear once; 
} 

@keyframes rotate { 
    0% {transform: rotate(0deg);} 
    100% {transform: rotate(720deg);} 
}

來源

2016-03-01 Shniper

你撥弄沒有jQuery的包括在內。點擊腳本窗口中的齒輪圖標，然後選擇要加載的jQuery版本。 –

即使jquery加載它不工作https://jsfiddle.net/9s66oyd4/1/ – Shniper

只是動畫marginLeft，而不是留下了jQuery的。你的div有相對的位置。

$(function() { 
    $('.logo').animate({ 
    marginLeft: '200px' 
    }, 2000); 
});

我也改變了小提琴中的圖片網址，以便它可以顯示一些東西。

這裏它的工作原理： https://jsfiddle.net/9s66oyd4/2/

來源

2016-03-01 18:29:22

感謝這工作。我頭腦中也有jQuery的錯誤鏈接。 – Shniper

Jquery頁面加載動畫

回答

相關問題