3

我有一个导航容器，里面有垂直排序的链接。我想要的是每个链接淡入并从左到右飞行。但是我不确定如何按顺序执行此操作？我有代码可以一次完成所有这些，但我想一次完成一个。或者至少让它们交错，所以动画触发之间会有一个任意延迟

代码：

$(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

更新

正如 Nate 在下面评论的那样，arguments.callee已弃用。虽然不是每个人都同意这个问题，但应该避免一般不推荐使用的功能。感谢 Nate，以下将在不使用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 
$(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 回答
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

我在这个话题上的 2 美分也是如此，因为我也在寻找一个想法。我为我的情况想出了这个：

// in On-Ready wrapper

$('nav li')
.hide(0)   // instant, no animation, 
.each(function (i) {
  $(this)
    .delay(i * 400)    // stagger the following animation
    .fadeIn("slow");
});

在上述问题的背景下，这看起来像

// in On-Ready wrapper

$('#navigation a')
.css({opacity: 0, marginRight: '10px'}) 
.each(function (i) {
  $(this)
    .delay(i * 400)    // stagger the following animation
    .animate({opacity: 1, marginRight: 0});
});

这行得通，因为.each(cb(index))给了我们每个孩子的索引，孩子们得到一个延迟和一个动画（按这个顺序）添加到他们的FX-Queue :)

顺便说一句，.delay()您可以使用.animate({}, options={delay: 123})延迟来设置它。

于 2021-09-09T11:09:49.023 回答