链接jQuery动画 [英] Chaining jQuery animations

问题描述

我有20个< li> 标签放置在一个网格中，我正在动画主< ul> 来移动所需的< li> 进入视图。

代码：

x和y是坐标，

howFast设置为1200，

easeItIn设置为easeOutBounce

$ b $如果（$（window）.width（）< 1259）{
if（screenFlipMode ==chained）{
（function（x ，y）{//小型链接
$（'。elements'）。animate（{
top：y +'px'
}，howFast，easeItIn，function（）{
$（'。elements'）。animate（{
left：x +'px'
}，howFast，easeItIn）;
}）;
}）（x，y ）;
}

现在，我遇到的问题是，如果我想从第一个< li> 到第二个< li> ，它仍会尝试移动Y轴我必须等待1200米/秒，直到X轴动画发挥作用）。

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

我的网格设置如下，我想禁用Y轴或X轴取决于下一个目标是否在同一行上。（IMAGE BELOW）。

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

>>。

解决方案

默认情况下，小号o在第一个动画的回调中应用第二个动画没有意义。

通过使用 filter（）过滤掉不在同一行上的所有元素，然后仅将 y 动画应用于它们，然后可以应用 x <
$ b

  $（'。elements'）
 .filter（function （）{
 return $（this）.offset（）。top！== y; 
。）
 .animate（{
 top：y 
}，howFast，easeItIn）
 .end（）。animate（{
 left：x 
}，howFast，easeItIn）; 
  




I have come code that chains animations together (i.e. move left, then move right).

I have 20 of <li> tags laid out in a grid and I am animating the main <ul> to move the required <li> into view.

Code:
x and y are co-ordinates,
howFast is set to 1200,
easeItIn is set to "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); 
}

Now, the problem I have is that if I want to move from the first <li> to the second <li> then it still tries to move the Y-Axis (which means I have to wait 1200m/s until the X-Axis animation comes into play).

So... Lovely people... My question is, how can I write an if clause that would say "if target <li> is on the same row, then don't do the Y-Axis animation...?

[EDIT] My grid is set up as follows, I want to disable the Y-Axis or X-Axis dependant on whether the next destination is on the same row. (IMAGE BELOW).

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

>.<

解决方案

Animations are queued by default, so there's no point in applying the second animation within the first animation's callback.

By using filter() you can filter out all of the elements that are not on the same row and then only apply the y animation to them, then you can apply the x animation to the entire collection.

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

这篇关于链接jQuery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！