如何啓動帶有動畫功能的窗口加載jQuery動畫？

-1

我正在製作這個動畫，其中所有的div都在窗口加載時從其初始狀態縮放了兩倍並旋轉0度，並在8秒後保持動畫。但這不起作用。我使用jQuery動畫來實現這一點，但似乎我做了一些錯誤的工作。請幫忙。如何啓動帶有動畫功能的窗口加載jQuery動畫？

<!DOCTYPE <!DOCTYPE html> 
<html> 
<head> 
    <title>Gallery Arijit</title> 

<style type="text/css"> 
    .nvidia{ 
     width: 230px; 
     height: 230px; 
     border:1px solid black; 
     position: relative; 
     left:130px; 
     top: 150px; 
     float: left; 
     background-color: white; 
     box-shadow: 0px 3px 15px 1px #333333; 
     transition: all 0.5s linear; 
    } 
    .nvidia:nth-child(even){ 
     transform:rotate(15deg); 
    } 
    .nvidia:nth-child(odd){ 
     transform:rotate(-15deg); 
    } 
    /*.nvidia:nth-child(even):hover{ 
     transform:rotate(0deg) scale(2,2); 
     z-index:1000; 
    } 
    .nvidia:nth-child(odd):hover{ 
     transform:rotate(0deg) scale(2,2); 
     z-index:1000; 
    }*/ 
    img{ 
     margin:10px 10px 4px 23px; 
    } 

    p{ 
     text-align: center; 
     font-size: 8px; 
     padding: 3px; 

    } 
</style> 

</head> 
<body> 

<div class="nvidia div1"> 
    <img src="nvidia-logo.jpg" width="180" height="180"> 
    <p>This is Nvidia logo.An awesome GPU Company.I ove it</p> 
</div> 
<div class="nvidia div2"> 
    <img src="nvidia-logo.jpg" width="180" height="180"> 
    <p>This is Nvidia logo.An awesome GPU Company.I ove it</p> 
</div> 
<div class="nvidia div3"> 
    <img src="nvidia-logo.jpg" width="180" height="180"> 
    <p>This is Nvidia logo.An awesome GPU Company.I ove it</p> 
</div> 
<div class="nvidia div4"> 
    <img src="nvidia-logo.jpg" width="180" height="180"> 
    <p>This is Nvidia logo.An awesome GPU Company.I ove it</p> 
</div> 
<div class="nvidia div5"> 
    <img src="nvidia-logo.jpg" width="180" height="180"> 
    <p>This is Nvidia logo.An awesome GPU Company.I ove it</p> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     setInterval(ani,8000); 
    }); 
</script> 
<script type="text/javascript"> 
    function ani(){ 
     $(".div1").animate({transform:'rotate(0deg) scale(2,2)',z-index:'1000'},"slow"); 
     $(".div2").animate({transform:'rotate(0deg) scale(2,2)',z-index:'1000'},"slow"); 
     $(".div3").animate({transform:'rotate(0deg) scale(2,2)',z-index:'1000'},"slow"); 
     $(".div4").animate({transform:'rotate(0deg) scale(2,2)',z-index:'1000'},"slow"); 
     $(".div5").animate({transform:'rotate(0deg) scale(2,2)',z-index:'1000'},"slow"); 
    } 
</script> 
</body> 
</html>

來源

2015-07-03 Anuran Barman

你的代碼有幾個問題。 z-index密鑰導致語法問題。一旦你有了這個固定的，轉換似乎不適用於jQuery動畫。嘗試使用CSS來代替。

function ani(){ 
    $(".div1").css({transform:'rotate(0deg) scale(2,2)'},"slow"); 
    $(".div2").css({transform:'rotate(0deg) scale(2,2)'},"slow"); 
    $(".div3").css({transform:'rotate(0deg) scale(2,2)'},"slow"); 
    $(".div4").css({transform:'rotate(0deg) scale(2,2)'},"slow"); 
    $(".div5").css({transform:'rotate(0deg) scale(2,2)'},"slow"); 
}

下面是我上面 http://jsfiddle.net/v1c72ueL/

來源

2015-07-03 02:48:59 noveyak

感謝info.but我想那些由一個一個動畫。如果我使用CSS，那麼他們將開始動畫所有在一起，在動畫功能我們可以在隊列中做動畫。那麼如何解決這個問題？ –

即使在你的代碼中，有動畫的工作，我認爲它會一次動畫所有。你的setInterval函數可以用來逐個動畫它們 http://jsfiddle.net/v1c72ueL/1/ – noveyak

這似乎工作。謝謝先生 –

列出的更改小提琴試試這個用z-index

$(".div1").css({transform:'rotate(0deg) scale(2,2)','z-index':'1000'},"slow"); 
$(".div2").css({transform:'rotate(0deg) scale(2,2)','z-index':'1000'},"slow"); 
$(".div3").css({transform:'rotate(0deg) scale(2,2)','z-index':'1000'},"slow"); 
$(".div4").css({transform:'rotate(0deg) scale(2,2)','z-index':'1000'},"slow"); 
$(".div5").css({transform:'rotate(0deg) scale(2,2)','z-index':'1000'},"slow");

來源

2015-07-03 03:10:59 hubot

是正常工作。謝謝 –

如何啓動帶有動畫功能的窗口加載jQuery動畫？

回答

相關問題