Цепная анимация jQuery

Question

Я получил код, который объединяет анимации (т.е. двигается влево, затем двигается вправо).

У меня есть 20 из <li> тегов, размещенных в сетке, и я анимирую основные <ul> дляпереместите требуемый <li> в поле зрения.

Код: х и у - координаты,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 ...?

[EDIT] Моя сетка настроена следующим образом, я хочу отключитьОсь Y или Ось X зависит от того, находится ли следующий пункт назначения в той же строке. (ИЗОБРАЖЕНИЕ НИЖЕ).

альтернативный текст http://demo.squeezedigital.com/barrie-test/jquery-grid.gif

>. <</strong>

Answer 1

Анимации ставятся в очередь по умолчанию, поэтому нет смысла применять вторую анимацию в обратном вызове первой анимации.

Используя filter(), вы можете отфильтровать все элементы, которые не находятся в одной строке, а затем применить к ним только анимацию y, а затем применить анимацию x ко всей коллекции. 1006 *

$('.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 селекторы

Answer 3

Ключевым моментом здесь является то, что вы можете анимировать несколько свойств одновременно.Итак, удалите функцию обратного вызова и просто добавьте еще одно свойство к параметрам первой анимации:

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».Это может повредить вашей производительности.