javascript - jQuery，在动画期间禁用悬停功能

Question

我在 jQuery 中有这个动画:

          $('.menu1').stop().animate({left: "29%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu2').stop().animate({left: "44%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu3').stop().animate({left: "59%", top: '2%',width:'40%', fontSize: '60%'}, 3000);
          $('.menu4').stop().animate({left: "74%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu1').find('.img1').attr("src", "images/botom1.png");
           $('.csoon').fadeToggle( 6000 );

以及hover的功能:

     $('.menu1').hover(function(){
              $('.menu1').stop(true, true).css('font-size','+=5%');
        }, function(){
            $('.menu1').stop(true, true).css('font-size','-=5%');
 });

问题是，如果鼠标在菜单上移动，在动画期间，悬停功能仍然会减小字体大小。我怎样才能禁用它？

JSFiddle: https://jsfiddle.net/jy57u25u/

Answer 1

使用unbind()

$('.menu1').unbind('hover');
$('.menu1').stop().animate({left: "29%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu2').stop().animate({left: "44%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu3').stop().animate({left: "59%", top: '2%',width:'40%', fontSize: '60%'}, 3000);
          $('.menu4').stop().animate({left: "74%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu1').find('.img1').attr("src", "images/botom1.png");
           $('.csoon').fadeToggle( 6000 );

$('.menu1').hover(function(){
              $('.menu1').stop(true, true).css('font-size','+=5%');
        }, function(){
            $('.menu1').stop(true, true).css('font-size','-=5%');
 });

或者，使用标志

var animating = false;
$('.menu1').hover(function() {
    if (!animating) {
        $('.menu1').stop(true, true).css('font-size', '+=5%');
    }
}, function() {
    if (!animating) {
        $('.menu1').stop(true, true).css('font-size', '-=5%');
    }
});
animating = true;
$('.menu1').stop().animate({
    left: "29%",
    top: '2%',
    width: '40%',
    fontSize: '60%'
}, 3000);
$('.menu2').stop().animate({
    left: "44%",
    top: '2%',
    width: '40%',
    fontSize: '60%'
}, 3000);
$('.menu3').stop().animate({
    left: "59%",
    top: '2%',
    width: '40%',
    fontSize: '60%'
}, 3000);
$('.menu4').stop().animate({
    left: "74%",
    top: '2%',
    width: '40%',
    fontSize: '60%'
}, 3000);
$('.menu1').find('.img1').attr("src", "images/botom1.png");
$('.csoon').fadeToggle(6000);
animating = false;