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

我在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 );

以及悬停的功能：

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

问题是，在动画期间，如果鼠标意外地在菜单上移动，则悬停功能仍会减小字体大小。如何禁用它

JSFiddle： 使用

或，使用标志

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;

---

一种解决方案是使用标志

$('.menu1').stop().data('my-animation', true).animate({
    left: "29%",
    top: '2%',
    width: '40%',
    fontSize: '60%'
}, 3000, function () {
    $(this).data('my-animation', false)
});

然后

---

你能做一个JSFIDLE吗？我只是编辑它并添加了JSFIDLE:-）

$('.menu1').stop().data('my-animation', true).animate({
    left: "29%",
    top: '2%',
    width: '40%',
    fontSize: '60%'
}, 3000, function () {
    $(this).data('my-animation', false)
});

$('.menu1').hover(function (e) {
    if (!$(this).data('my-animation')) {
        $('.menu1').stop(true, true).css('font-size', e.type == 'mouseenter' ? '+=5%' : '-=5%');
    }
});