使用動畫和每一個用於迭代動畫

的Javascript使用動畫和每一個用於迭代動畫

$(document).ready(function() { 
$(".container").animate({left:'120px'}, 6000).queue(function(next){ 
$(".child").css('display', 'none'); 
}); 
});

上述腳本動畫一個框，然後隱藏它動畫完成後。問題是我有一組相同的框，我想爲它們中的每一個設置動畫。我正在嘗試使用.each來實現它，但到目前爲止它根本不起作用。因此，要再次突出我的問題* 我想按時間順序依次動畫一組相同的盒子（html-vise，頂部第一個，然後是下一個），然後隱藏框設置CSS財產和價值。這適用於一個盒子，但不適用於幾個盒子。我試過使用。每個，但沒有好消息。 *

HTML

<div class="container"> 
<div class="child"></div> 
<div class="child"></div> 
</div>

來源

2012-12-02 Dino Excel

你可以提供你爲什麼要使用'.queue（）'一個http://jsfiddle.net/ –

？ '.animate（）'方法給你一個回調選項。 –

以確保css在最後被應用？有用！那是重要的 –

你也可以做到這樣！

<script> 
$(document).ready(function() { 
$(".container").animate({left:'120px'}, 6000).queue(function(next){ 
var childs = $('.child'), 
    i = 0; 
(function() { 
    $(childs[i++]).hide('slow',arguments.callee); 
})(); 
}); 
}); 
</script>

希望這可以幫助你

來源

2012-12-02 21:16:27 Anass

function queue(start) 
{ 
    var rest = [].splice.call(arguments, 1), 
    promise = $.Deferred(); 

    if (start) 
    { 
     $.when(start()).then(function() { 
     queue.apply(window, rest); 
       }); 
    } else { 
     promise.resolve(); 
} 
    return promise; 
} 





function animate() 
{ 
    queue(function() { 
     return $(".child:first").animate({opacity: "show"}, "slow").delay(1500); 
     }, function() { 
     return $(".child:first").animate({opacity: "hide"}, "slow"); 
     }, function() { 
     return $(".child:second").animate({opacity: "show"}, "slow").delay(1500); 
     }, function() { 
     return $(".child:second").animate({opacity: "hide"}, "slow"); 
    }});  
}

來電動畫，當你想淡入和淡出你的div

來源

2012-12-02 20:53:19 Chipmunk

喲意味着什麼？ –

使用動畫和每一個用於迭代動畫

回答

相關問題