Question

我想要一个带有4个边的悬停滑块，其中当我将鼠标悬停在幻灯片上时，它会在宽度上放大，而另外3个在宽度上减小i。我想出了这段代码：

$(document).ready(function(){   

        $('.hovermenu li').mouseenter(function(){
            $(this).animate({width: "69%"},250);
            $(this).parent().children('li').not(this).animate({width: "10%"},250);
        });

        $('.hovermenu li').mouseleave(function(){
            $(this).animate({width: "25%"},250);
            $(this).parent().children('li').not(this).animate({width: "25%"},250);
            $(this).not('li').animate({width: "10%"},250);  
        });

    });

但它有一个问题。当我将鼠标悬停在一张幻灯片上（不是从一张幻灯片迁移到另一张幻灯片）时，脚本似乎工作正常，但当我将鼠标从一张幻灯片移动到另一张幻灯片时，4张幻灯片表现得很好非常疯狂，并继续改变他们的宽度一段时间，即使我把鼠标从幻灯片中取出。完整的小提琴就在这里：http://jsfiddle.net/uprL2/1/

Answer 1

尝试在使用.stop(clearQueue)，

开始新动画队列之前清除动画队列

$('.hovermenu li').mouseenter(function(){
   $(this).stop().animate({width: "69%"},250);
   $(this).parent().children('li').not(this).stop(true).animate({width: "10%"},250);
});

$('.hovermenu li').mouseleave(function(){
   $(this).stop().animate({width: "25%"},250);
   $(this).parent().children('li').not(this).stop(true).animate({width: "25%"},250);   
});

DEMO

当我们尝试将动画移动到结束状态时，会出现问题，因此请尝试从stop函数调用中删除第二个参数。意思是要求函数不要跳到最后。

Answer 2

使用.stop(true,true)布尔值，指示是否立即完成当前动画。

 $('.hovermenu li').mouseenter(function(){
       $(this).stop(true,true).animate({width: "69%"},250);
       $(this).parent().children('li').not(this).stop(true,true).animate({width: "10%"},250);
    });

     $('.hovermenu li').mouseleave(function(){
        $(this).stop(true,true).animate({width: "25%"},250);
        $(this).parent().children('li').not(this).stop(true,true).animate({width: "25%"},250);   
    });

DEMO

Answer 3

试试这个.hope它有帮助

  $('.hovermenu li').mouseenter(function(){
  $(this).stop().animate({width: "69%"},250);
  $(this).parent().children('li').not(this).stop(true,true).animate({width: "10%"},250);
 });

$('.hovermenu li').mouseleave(function(){
  $(this).stop().animate({width: "25%"},250);
  $(this).parent().children('li').not(this).stop(true,true).animate({width: "25%"},250);   
});

使用mouseenter和mouseleave悬停

3 个答案:

DEMO