jQuery aimate in animate callback работает только один раз

У меня есть две ссылки на страницы, которые вызывают анимацию jQuery.jQuery aimate in animate callback работает только один раз

Функция обратного вызова в анимации запускает вторую анимацию.

Это прекрасно работает, однако, он работает только при первом вызове функции.

Каждый раз, когда первая из двух анимаций работает, а вторая - нет, она просто меняет CSS без эффекта.

У меня мозг здесь, без эффекта (каламбур).

function switchItem(e) { 
    e.preventDefault(); 

    // If not current piece 
    if($(this).hasClass('light')) { 

     /* VARIABLES */ 
     var container = $('.portfolio footer .portfolio_content'); 
     var link = $(this).attr('id'); 
     var newItem = $(this).html(); 


     /*=================================================== 
     * This is the Key part here 
     ===================================================*/ 

      /* FIRST ANIMATION */ 

      container.animate({ 
       'right':'-100%' 
      }, 300, 'swing', 

      // Callback Function 
      function() { 

       $(this).html('').css({'left':'-100%'}); 

       $.get('inc/portfolio/'+link+'.php', function(data) { 

        container.html(data); 

        /* SECOND ANIMATION */ 

        container.animate({ 
         'left':'0%' 
        }, 300, 'swing'); 

       }); 
      });  
    } 
}

Вот демонстрация: http://eoghanoloughlin.com/my_site/#portfolio

источник

2013-04-17 loxyboi

Возможно ли, что это связано с тем, что вы помещаете анимацию в функцию @ get @ вместо прямого вызова функции обратного вызова? попробуйте переместить анимацию за пределы get, но внутри обратного вызова. – MaxOvrdrv

Почему вы анимируете правую и левую? Я думаю, вам нужно выбрать и придерживаться этого. Правильный и левый css могут быть противоречивыми. * в двух вызовах container.animate() ... –

вы были правы, они были противоречивыми. – loxyboi

См. Рабочий образец здесь. Слева конфликтует с вашей первой правой -100% анимацией, а в конце, если вы не сбросите права, то это будет конфликтовать с вашим второй слева анимации

http://jsfiddle.net/PAdr3/2/

сброса осталось до анимации

container.css('left', 'auto');

и сброса правильно, когда полная

container.animate({ 
    'left':'0%' 
}, 300, 'swing', function() { 
    $(this).css('right', 'auto'); 

});

источник

2013-04-17 14:31:32 Huangism

Большое спасибо, это было исправление, в котором я нуждался. – loxyboi

У меня есть еще один вопрос, если кто-нибудь это увидит. Вы можете заметить во время анимации в демонстрации, что иногда часть изображения остается позади в течение секунды секунды. Кто-нибудь знает, как быстро исправить эту проблему? – loxyboi

когда это произойдет? вы видите это на скрипке? – Huangism

Я думаю, что функция одушевленные не строка, пока первый одушевленный не будет готов. Документы говорят:

В комплект поставки включена полная функция обратного вызова после завершения анимации . Это может быть полезно для последовательности различных анимаций в последовательности.

Нечто подобное может работать:

function switchItem(e) { 
    e.preventDefault(); 
    // If not current piece 
    if($(this).hasClass('light')) { 
     /* VARIABLES */ 
     var container = $('.portfolio footer .portfolio_content'); 
     var link = $(this).attr('id'); 
     var newItem = $(this).html(); 

     /*=================================================== 
     * This is the Key part here 
     ===================================================*/ 
      /* FIRST ANIMATION */ 
      container.animate({ 
       'right':'-100%' 
      }, 300, 'swing', 
      // Callback Function 
      function() { 
       $(this).html('').css({'left':'-100%'}); 
       $.get('inc/portfolio/'+link+'.php', function(data) { 
        container.html(data); 
       }); 
      }).complete(
       /* SECOND ANIMATION */ 
       container.animate({ 
        'left':'0%' 
       }, 300, 'swing'); 
      );  
    } 
}

источник

2013-04-17 14:27:51 tuvokki

При замене HTML на страницу с новым содержанием, он не будет автоматически добавлять слушателей или другие усовершенствования Jquery, которые добавлены с помощью JavaScript.

Я подозреваю, что вам нужно применить их еще раз после того, как вы разместите контент, который вы получили с помощью $ .get на странице.

Другая альтернатива заключается в том, чтобы добавить все содержимое в одну загрузку, но сделать вторую страницу скрытой. Это, вероятно, более приятная альтернатива, чем использование $ .get

источник

2013-04-17 14:28:30

jQuery aimate in animate callback работает только один раз

ответ

Смежные вопросы