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

悬停的功能：

     $('.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;

Answer 2

一种解决方案是使用标志

$('.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%');
    }
});

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

2 个答案: