JQuery와 마우스 오버에 애니메이션이 코드와 함께 여섯 개 버튼이로 마우스를

Question

에 중지 :

$('img#b1').on('mouseenter', function() { 
    var height = $('div#b1').css('height'); 
    if(height == '50px'){ 
     $('div#b1').animate({ 
     'width' : '1100' 
    }, 200); 
    } 
}); 
$('img#b1').on('mouseout', function() { 
    var height = $('div#b1').css('height'); 
    if(height == '50px'){ 
     $('div#b1').animate({ 
     'width' : '990' 
    }, 200); 
    } 
}); 

작동하지만 빠르게이고 몇 번 아웃 한 후 마우스를 가지고 밖으로 마우스를 이동하는 경우, 그것은 애니메이션을 다시 시작합니다 시간이 지나면 마우스가 다가갔습니다.

마우스가 위에 있지 않으면 애니메이션을 다시 시작하고 싶지 않습니다.

어떻게 해결할 수 있습니까?

Answer 1

:

$('img#b1').on({ 
    mouseenter: function() { 
     var height = $('div#b1').css('height'); 
     if(height === '50px'){ 
      $('div#b1').stop().animate({ 
       width: 1100 
      }, 200); 
     } 
    }, 
    mouseout: function() { 
     var height = $('div#b1').css('height'); 
     if(height === '50px'){ 
      $('div#b1').stop().animate({ 
       width: 990 
      }, 200); 
     } 
    } 
}); 

그것은 더 명확하게 코드를 만든다.

Answer 2

는이 같은 애니메이션을 중지해야합니다 : 당신은 다음과 같이 코딩한다

$('img#b1').on('mouseenter', function() { 
    var height = $('div#b1').css('height'); 
    if(height == '50px'){ 
     $('div#b1').stop().animate({ 
     'width' : '1100' 
    }, 200); 
    } 
}); 
$('img#b1').on('mouseout', function() { 
    var height = $('div#b1').css('height'); 
    if(height == '50px'){ 
     $('div#b1').stop().animate({ 
     'width' : '990' 
    }, 200); 
    } 
}); 

Answer 3

여기에 완벽한 예가 나와 있습니다.

$('img#b1') 
    .hover(function() { 
    $(this).stop().animate({ width: 1100 }, 'fast'); 
    }, function() { 
    $(this).stop().animate({ width: 990 }, 'fast'); 
    }); 

http://css-tricks.com/full-jquery-animations/