2013-08-22 4 views
0

У меня есть этот бит кода, который анимирует фон, когда элемент с классом jq перевернут. Код подбирает текущий цвет фона и оживляет его до нового цвета, а затем по выходу цвет возвращается к оригиналу. Если действие выполняется слишком быстро один за другим, код будет подбирать цвет фона элемента до того, как он полностью вернется к оригиналу. Таким образом, мне нужно иметь что-то вроде функции complete() и jQuery функции анимации jQuery, но, видимо, это не сработало для меня. Как отключить код на время, необходимое для завершения анимации?jQuery animate - отключить до полного завершения

$(document).ready(function(){ 

      var isHovered = false; 
      $(".jq").hover( 

       if(!isHovered) {    
        isHovered = true; 
        function(){ 
         var bgcol = $(this).css('backgroundColor'); 
         $(this).animate({  
          backgroundColor: "#DDD", 
          color:"#111" 
         }, trans).data('hoverbackground', bgcol); 
        }, 
        function() {  
         $(this).animate({ 
          backgroundColor: $(this).data('hoverbackground'), 
          //backgroundColor: "#EFEFEF", 
          color:"#888" 
         }, trans, complete: function() { 
         isHovered = false;}).removeData('hoverbackground'); 
        } 
        });       
       }); 
+2

Можете ли вы предоставить JSFiddle, пожалуйста? – Arda

+0

Переходы CSS3? – kayen

ответ

0

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

$(".jq").hover( 


       function(){ 

        if(!isHovered) { 
        isHovered = true; 
         var bgcol = $(this).css('backgroundColor'); 
         $(this).animate({  
          backgroundColor: "#DDD", 
          color:"#111" 
         }, trans).data('hoverbackground', bgcol); 
       }}, 
       function() { 

        $(this).animate({ 
         backgroundColor: $(this).data('hoverbackground'), 
         //backgroundColor: "#EFEFEF", 
         color:"#888" 
        }, trans, function() { 
        isHovered = false;}).removeData('hoverbackground'); 

       }); 

    }); 
Смежные вопросы