Question

好的，我正试着清楚这个......

我有一些重要的盒子，都有同一个班级.box当页面加载时，我希望这些从左侧滑入。根据此代码，这完美无缺：

$(document).ready(function(){
    $(".box").animate({left: "-=920px", opacity: "1"}, 1250)
    return false;
});

现在所有的盒子都在同时飞入。我想要的是顶部盒子先行，第二个盒子稍后滑动，第二个盒子比第二个盒子晚一秒，产生一种连锁反应。

我怎样才能实现这一目标，并且仍然保留一个课程（以保持动态）？

我也希望创建一个模糊到无模糊的效果，如果有人对此有一些想法也会很棒，但它不是优先级

编辑：完整的测试代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript"> 
$(document).ready(function(){
    $(".box").animate({left: "-=920px", opacity: "1"}, 1250)
    return false;
});
</script> 

<style type="text/css"> 
.box {
    background: #6699FF;
    height: 100px;
    width: 100px;
    position: relative;
    margin-left: 920px;
    opacity: 0.0;
}
#main_box{
    overflow: hidden;
    padding: 5px;
    border: 3px solid;
}
</style> 

<div id="main_box">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
</div>

Answer 1

如果您使用jQuery 1.4或更高版本，则很容易。

http://jsfiddle.net/9GjsC/

$(".box").each(function( index ) {
    $(this).delay( index * 1000 ).animate({left: "-=920px", opacity: "1"}, 1250);
});

http://api.jquery.com/delay/

Answer 2

这是我对你所要求的东西的实现。我将研究更通用的解决方案，并在准备好后发布，但如果您有任何疑问，请告诉我。

jQuery.fn.staggeredAnimate = function() {
  // initialize array of offsets
  var off = []

  // add each element's aggregate offset to the offsets array
  this.each(function(){
    off.push($(this).offset().left + $(this).offset().top)
  })

  // find the maximum and minimum offsets
  var omax = Math.max.apply(Math, off)
  var omin = Math.min.apply(Math, off)

  // fade in each element in a timing relative to the offsets
  return this.each(function(){
    var ratio = ($(this).offset().left + $(this).offset().top - omin) / omax
    var delay = 500 * (ratio)
    $(this).delay(delay).animate({opacity: 1})
  })
}

这是基于您的要求的一般解决方案。只需传入你想要交错的函数作为第一个参数。请注意，这会利用jQuery动画堆栈，因此如果设置jQuery.fx.off = true，则回调将立即全部执行。

jQuery.fn.staggeredAnimate = function(func, delay) {
  if(delay == undefined) delay = 500;
  return this.each(function(i){
    $(this).animate({dummy: 1}, delay * i, func);
  });
}

以下是行动中的功能：http://jsfiddle.net/V9NzR/

Answer 3

像这样修改你的jquery代码：

var boxes = $('.box');
i = 0;

$(document).ready(function(){
    $(boxes[i++] || []).animate({left: "-=920px", opacity: "1"}, 1250, arguments.callee)
});

Here is the working demo.

Answer 4

我的贡献：

$(function(){
   var move = function(){
       var self = this;
       move.delay = move.delay ? move.delay+=1000 : 1;

       setTimeout(function(){
           self.animate({
               left: '+=500'
           }, 1000);
       }, move.delay);
   };       

   $('.box').each(function(){
       move.apply($(this), []);        
   });
});

链接：http://www.jsfiddle.net/zDSJ3/

Patricks解决方案可能是最好的，我只是想做一些过于复杂的事情：p

jquery函数应用于具有延迟的同一类

4 个答案: