jquery - 使用 mouseenter 和 mouseleave 悬停

Question

我想要一个有 4 个边的悬停 slider ，其中当我将鼠标悬停在幻灯片上时，它的宽度会增大，而其他 3 个边的宽度会减小。我想出了这段代码:

$(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 张幻灯片的行为非常疯狂地继续改变它们的宽度一段时间，即使我把鼠标从幻灯片上移开。完整的 fiddle 在这里: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 函数调用中删除第二个参数。意思是要求函数不要跳到末尾。