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/