3

内部に垂直に並べられたリンクを含むナビゲーション コンテナーがあります。私が望むのは、各リンクがフェードインして左から右に飛ぶことです。しかし、これを順番に行う方法はわかりませんか？それらをすべて一度に実行するコードがありますが、一度に 1 つずつ実行したいと考えています。または、少なくともそれらをずらして、アニメーションの起動の間に任意の遅延があるようにします

コード：

$(document).ready(function(){
    $("#navigation a")
        .css({opacity:0,"margin-right":"10px"})
        .animate({opacity:1,"margin-right":"0"});
});
4

5 に答える 5

4

これは$.queueの完璧な使用法です。質問をありがとう：あなたは私にこれを研究するためにそれをもう少し良く使う方法を学ばせました。

これが実際の例です：http：//jsfiddle.net/EJgEC/

// Cache our jQuery-wrapped objects
var $navigation = $('#navigation'),
    $navigationLinks = $navigation.find('a');

// Set the initial state on navigation links for future animation
$navigationLinks.css({
  opacity: 0,
  "margin-left": "20px"
});

$navigationLinks.each(function (i, item) {
  var $item = $(item);

  // Add animations on each item to the fx queue on the navigation DOM element
  $.queue($navigation[0], 'fx', function () {
    var that = this;
    $item.animate({
      opacity: 1,
      "margin-left": "0"
    }, {
      complete: function () {
        // Fire the next item in the queue as the callback
        $.dequeue(that);
      }
    });
  });
});

// Start the navigation queue
$navigation.dequeue();

また、$。queueを読むことを強くお勧めします。知っておく価値があります。http://api.jquery.com/jQuery.queue/

于 2013-01-06T16:26:14.880 に答える
3

アップデート

ネイトが以下にコメントしているように、arguments.calleeは非推奨です。誰もがこの問題に同意するわけではありませんが、一般的に非推奨の機能は避ける必要があります。ネイトのおかげで、以下は使用せずに動作しarguments.calleeます。

実例：http： //jsbin.com/idizi/1359/edit

var paras = $('p'),
    i = 0;

// If using jQuery 1.3 or lower, you need to do 
// $(paras[i++] || []) to avoid an "undefined" error
function animateNav () {
    $(paras[i++]).fadeIn('fast', animateNav)
                 .css({opacity:0,"margin-left":"10px"})
                 .animate({opacity:1,"margin-left":"0"});
}

animateNav();

これにより、目的の結果が得られます。

実例：http： //jsbin.com/idizi/1356/edit

var paras = $('p'),
        i = 0;

// If using jQuery 1.3 or lower, you need to do 
// $(paras[i++] || []) to avoid an "undefined" error
(function() {
  $(paras[i++]).fadeIn('fast', arguments.callee)
               .css({opacity:0,"margin-right":"10px"})
               .animate({opacity:1,"margin-right":"0"});
})();

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-easy-sequential-animations-in-jquery/経由

于 2013-01-06T16:25:57.993 に答える
0

これは、jQuery に依存しないソリューションです。

フィドル: http://jsfiddle.net/N9afT/

   function stagger(targets, interval, action){
    for (var i = 0, maxi = targets.length; i < maxi; i++) {
        (function(){
            var target = targets[i];
            setTimeout(function(){action(target);}, interval*i);
        })();
    }
   }

例：

stagger([1, 2, 3], 1000, function(val){console.log(val)})

もちろん、jquery ターゲットにも適用できます。

stagger($(".element-class"), 1000, function(el){console.log(el)})
于 2013-11-15T22:12:31.170 に答える
0 
$(document).ready(function(){
   var links =  $("#navigation a");
   var count = 0;

   var handle = setInterval(function(){
         $(links[count])
            .css({opacity:0,"margin-right":"10px"})
            .animate({opacity:1,"margin-right":"0"});
             count++;

             if(count==links.length){
                  clearInterval(handle);
              }                

    }, 5000);



});
于 2013-01-06T16:09:05.137 に答える