JQuery анимации получает выполняется только один раз

У меня есть эта функция:JQuery анимации получает выполняется только один раз

function flipAndFade(elemToAnimate,overlay) { 
     elemToAnimate.animate({ textIndent: 0 }, { 
      step: function (go) { 
       $(this).css('-moz-transform', 'rotateY(' + go + '360deg)'); 
       $(this).css('-webkit-transform', 'rotateY(' + go + '360deg)'); 
       $(this).css('-o-transform', 'rotateY(' + go + '360deg)'); 
       $(this).css('transform', 'rotateY(' + go + '360deg)'); 

       $(".overlay-bg").delay('600').fadeIn('slow', function() { 
        $(this).stop(); 
       }); 
       overlay.delay('600').fadeIn('slow', function() { 
        $(this).stop(); 
       }); 

       $(".overlay-bg").animate({ "top": 0 }, { duration: 1 }); 
       $(".overlay-bg").animate({ "left": 0 }, { duration: 1 }); 
       overlay.animate({ "top": 0 }, { duration: 1 }); 
       overlay.animate({ "left": 0 }, { duration: 1 }); 
      }, 
      duration: 1000, 
      complete: function() { 
       $(this).animate().stop(); 
      } 
     });   
    }

И у меня есть два elemnts прослушивания для мыши:

$(".module3").click(function(){ 
    flipAndFade($(".module3"), $(".overlay3")); 
}); 
$(".module4").click(function(){ 
    flipAndFade($(".module4"), $(".overlay4")); 
});

Но проблема в том, когда я нажимаю на первом элементе все работы хорошо. Но тогда щелчок по второму элементу не выполняет анимацию. Если я обновляю и нажимаю на второй, он работает, а затем первый - нет. Я читал в сообщениях о запуске функций, но я не понимаю, как это сделать.

Заранее спасибо

источник

2014-01-31 setlio

FYI, и это, безусловно, только личное предпочтение, но, похоже, вы смешиваете анимацию CSS и анимацию jQuery. Я предлагаю придерживаться только анимации CSS, установить логику в классах в вашем файле CSS. Таким образом, чтобы вызвать анимацию, вы можете просто добавить jQuery класс, который оживляет объект. Должно сделать вещи немного легче организовать. –

-1

Походит обработчики щелчка являются для одного селектора $(".module3")

источник

2014-02-01 00:09:22 Dinesh

Это опечатка извините, я отредактировал сообщение – setlio

Right. Прости. – Dinesh

@DA эта скрипка выглядит как-то, что вы делаете? Пожалуйста, отредактируйте, если нет, и вы сможете помочь вам больше. Http://jsfiddle.net/X8tL4/1/ – Dinesh

Если имеется несколько экземпляров .module3 вашей страницы, то вам нужно сделать, это:

$(".module3").click(function(){ 
    flipAndFade($(this), $(".overlay3")); 
});

И вызывается только один раз, поскольку он будет обслуживать все ваши элементы .module3 с помощью этого одного блока кода.

Или, если есть только один .module3 и один .module4, то вы можете служить одновременно с этим, и вы действительно хотите передать $(".module3") к обоим, то вы можете просто объединить селекторы и использовать один кусок кода, как это:

$(".module3, module4").click(function(){ 
    flipAndFade($(".module3"), $(".overlay3")); 
});

Если есть другая .overlay3 для каждого .module3, то вам нужно будет изменить код дальше для того, чтобы определить, какие .overlay3 идет, с которым .module3 вероятно, с помощью $(this).find(some selector), но я d нужно увидеть HTML, который содержит .overlay3, чтобы точно знать, что вам нужно.

Тогда, я бы спросить, почему ты звонишь $(this).animate().stop(); в complete: обработчика? Анимация должна быть уже сделана правильно?

источник

2014-02-01 00:11:58 jfriend00

Я удалил $ (this) .animate(). Stop(); Ты прав. Это разные элементы, у меня была опечатка, извините. У них разные имена, но проблемы все еще есть ... – setlio

JQuery анимации получает выполняется только один раз

ответ

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