Question

我来的代码是将动画链接在一起（即向左移动，然后向右移动）。

我有20个<li>标记布置在网格中，我正在为主<ul>设置动画，以将所需的<li>移动到视图中。

代码：
x和y是坐标，
howFast设置为1200，
easeItIn设置为“easeOutBounce”

if ($(window).width()<1259) { 
  if (screenFlipMode == "chained") {
    (function(x, y) { //Small Chained
      $('.elements').animate({
        top: y+'px'
      }, howFast, easeItIn,function() {
        $('.elements').animate({
          left: x+'px'
        }, howFast, easeItIn);
      });
   })(x,y); 
}

现在，我遇到的问题是，如果我想从第一个<li>移动到第二个<li>，那么它仍然会尝试移动Y轴（这意味着我必须等待1200米） / s直到X轴动画开始播放。）

所以...可爱的人...我的问题是，如何写一个if条款，说“如果目标<li>在同一行，那就不要做了Y轴动画......？

[编辑] 我的网格设置如下，我想根据下一个目的地是否在同一行上禁用Y轴或X轴。（以下图片）。

alt text http://demo.squeezedigital.com/barrie-test/jquery-grid.gif

＆GT;。＆LT;

Answer 1

默认情况下，动画会排队，因此在第一个动画的回调中应用第二个动画毫无意义。

通过使用filter()，您可以过滤掉不在同一行的所有元素，然后仅将y动画应用于它们，然后您可以应用x动画整个系列。

$('.elements')
    .filter(function(){
        return $(this).offset().top !== y;
    })
    .animate({
        top: y
    }, howFast, easeItIn)
    .end().animate({
        left: x
    }, howFast, easeItIn);

Answer 2

如果没有if声明，您可以解决该问题。只需调整selector可能有所帮助。

$('.elements:first-child')

例如

。另一个可能是

$('table').find('tr').find('.elements:nth-child(2)')

jQuery selectors

Answer 3

这里的关键是您可以同时为多个属性设置动画。因此，删除你的回调函数，只需将另一个属性添加到第一个动画的参数：

if ($(window).width()<1259) 
{ 
    if (screenFlipMode == "chained") 
    {
        function(x, y)
        { //Small Chained
            $('.elements').animate({
                top: y,
                left: x
            }, howFast, easeItIn)
        }(x,y); 
    }
}

如果任一属性已经处于该值，则不需要更改，因此该属性不会设置动画。但是另一个仍然会有动画。

此外，使用animate（）时，jQuery会自动将数值视为像素，因此无需附加“px”。这实际上可能会损害您的表现。

链接jQuery动画

3 个答案: