链接jQuery动画

我已经将代码链接在一起动画（即向左移动，然后向右移动）。链接jQuery动画

我有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米/秒，直到X轴动画发挥作用）。

所以...可爱的人...我的问题是，我怎么写一个if子句，它会说“如果目标<li>在同一行上，那么不要做Y轴动画...... ？

[编辑]我的网格设置如下，我要禁用Y轴或X轴取决于下一个目的地是否在同一行。（图像下方）。

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

>。<

来源

2010-06-22 Barrie Reader

动画默认情况下，排队，所以有在应用第一动画的回调中的第二动画是没有意义的。

通过使用filter()你可以过滤掉所有不在同一行，那么只有y动画适用于他们的元素，那么你可以申请的x动画整个集合。

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

来源

2010-06-22 15:19:47 James

完美！格拉西亚斯！ – 2010-06-22 15:22:53

您也许可以在没有if语句的情况下解决该问题。只需改编selector可能会有所帮助。

$('.elements:first-child')

例如。另一种可能是

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

jQuery selectors

来源

2010-06-22 15:14:54 jAndy

我刚刚提出这个建议。 – DLH 2010-06-22 15:16:08

我不太明白，如果我有网格...我会更新我的问题其实......） – 2010-06-22 15:17:41

这里的关键是您可以同时为多个属性设置动画效果。所以，删除你的回调函数，只是另一种属性添加到第一个动画的PARAMS：

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

如果这两个属性是已经在该值，它不会需要改变的，因而这种财产赢得”动画。但另一个仍然会生动。

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

来源

2010-06-22 15:40:54

链接jQuery动画

回答

相关问题