1

左から右に一連の要素をフェードインしています。ネストされた関数を使用せずに、それを行うためのエレガントな方法を探していました。Queue は時間を節約しているように見えますが、なぜこのように機能しているのかわかりません。

これは機能します：

$('.item').queue(function(next) {
  $(this).delay(500).animate({opacity: 1}, 1000);
});


$('.item').queue(function(next) {
  $(this).parent().next('.item').dequeue();
  next();
});


$('.intro i:first').dequeue();

これはしません:

$('.item').queue(function(next) {
  $(this).delay(500).animate({opacity: 1}, 1000);
  $(this).parent().next('.item').dequeue();
  next();
});


$('.item').dequeue();

それらを一度にフェードインします。

アニメーションまたはデキューが発生したときに実行される一連のアイテムをキューに追加することを理解していました。それで... なぜこれが機能するのですか？

4

3 に答える 3

1 
 var items  = $('.item'),
     index  = 0,
     itemInterval;

 itemInterval = setInterval(function(){
     items.eq(index).fadeIn(1000);
     index++
     if(index >= items.length){ clearInterval(itemInterval); }
 }, 500);

これは私のパターンです。

于 2013-03-01T20:18:39.127 に答える
1

それがキュー機能の仕組みだとは思いません。ドキュメントによると、それは1 つの要素のキューであり、使用しようとしているようにレンダリングするアニメーションのキュー全体ではありません。ただし、やろうとしていることは簡単です。これはどう：

$(function(){
    var queue = $.makeArray($("div"));    
    (function doAnimation(){
        var item = queue.pop();
        if (item) {
            $(item).delay(500).animate({opacity: 0.8}, 1000, doAnimation);
        }
    })();    
});

JsFiddle: http://jsfiddle.net/6xdeP/1

編集：よりクリーンなソリューションに更新されました。

于 2013-03-01T19:56:41.513 に答える
1

アニメーション キューがどのように機能するのかよくわからないので、キューに関する質問に直接答えることはしません。何が起こっているのかというと、アニメーション キューが一度にすべて起動していると思います。$('.item')

ただし、うまくいけばあなたの問題を解決するために答えています。

デモ

HTML

<ul>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
</ul>

CSS

.item
{
    display:none;
   position:relative;
   float:left;    
   border:1px solid black;
   background-color:green;
    list-style:none;
    padding:10px;
}

jQuery

$.fn.ProgressiveFadeIn=function(delay,speed)
{
    if(!delay) delay=500;
    if(!speed) speed=1000;
    $(this).each(function(i){
        $(this).delay((speed+delay)*i).fadeIn(speed);
    });
}
$(".item").ProgressiveFadeIn(500,1000);
于 2013-03-01T19:56:42.217 に答える