0

Javascript

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

上記のスクリプトは、ボックスをアニメーション化し、アニメーションの完了後にボックスを非表示にします。問題は、同じボックスのセットがあり、それぞれをアニメートしたいということです。.eachを使用して機能させようとしていますが、これまでのところまったく機能しません。質問をもう一度強調するために*同じボックスのセットを時系列で次々にアニメーション化し（html-vise、最初に上に、次に次に）、cssプロパティを設定するボックスを非表示にします。価値。これは1つのボックスで機能しますが、複数のボックスでは機能しません。.eachを使ってみましたが、良いニュースはありません。*

HTML

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

2 に答える 2

2 
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をフェードインおよびフェードアウトする場合は、animateを呼び出します

于 2012-12-02T20:53:19.553 に答える
1

この方法でもできます！

<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-02T21:16:27.117 に答える