鼠标进入和离开动画

Question

我制作了一个简单的鼠标进入和离开动画。当你将鼠标移至div上时，链接div会打开。当你将鼠标移出时，div会关闭。我设置了slideUp和slideDown的动画效果。

我遇到了一个问题。页面上有很多.comment div。当我快速地在项目上悬停时，滑动动画就会变得疯狂，并且你会看到很多次动画。如何解决这个问题？谢谢！

$("#comments .comment .links").hide();
$("#comments .comment").mouseenter(function() {
    $(".links",this).slideDown(300);
}).mouseleave(function() {
    $(".links",this).slideUp(300);
});

- Mike Vierwind

---

嗨呀！分享这个 http://jsfiddle.net/hMx9p/ 幻灯片的另一个版本，如果你不想使用鼠标进入和离开，祝你愉快，再见！ - Tats_innit

Answer 1

使用stop(true)在每个事件上清除动画队列：

$("#comments .comment .links").hide();
$("#comments .comment").mouseenter(function() {
    $(".links",this).stop(true).slideDown(300);
}).mouseleave(function() {
    $(".links",this).stop(true).slideUp(300);
});

此外，你可以使用hover()来简化这段代码：

$("#comments .comment .links").hide();
$("#comments .comment").hover(
    function() { $(".links", this).stop(true).slideDown(300); },
    function() { $(".links", this).stop(true).slideUp(300); }
);

- Rory McCrossan

Answer 2

您希望它执行什么行为？也许在开始动画之前，您可以停止它对所有其他内容的动画。

$("#comments .comment").mouseenter(function() {
    $("#comments .comment").stop();
    $(".links",this).slideDown(300);
}).mouseleave(function() {
    $(".links",this).slideUp(300);
});

- Steve

Answer 3

这里也有同样的问题！

$("#spezial_navi_btn_20").mouseenter(function() {

    $("#content").stop(true).fadeOut("slow");
    $("#spezial_navi").css('background-image', 'url(http://#)');
    $("#spezial_navi_20").stop(true, true).slideUp("fast");
    $("#spezial_navi_desc_20").stop(true, true).slideDown('slow', function() {
        $("body").ezBgResize({
        img : "http://#",
        opacity : 1,
        center  : true 
        });
    });
    $("#spezial_navi_desc_30").stop(true, true).slideUp('slow');
    $("#spezial_navi_30").stop(true, true).slideDown('slow'); 
    $("#spezial_navi_desc_40").stop(true, true).slideUp('slow');
    $("#spezial_navi_40").stop(true, true).slideDown('slow'); 
});

已解决!! 不是： $("#spezial_navi_20").stop(true, true).slideUp("fast"); 和： $("#spezial_navi_desc_20").stop(true, true).slideDown('slow', function() { 我做了： $("#spezial_navi_20").slideUp("fast"); 和： $("#spezial_navi_desc_20").slideDown('slow', function() {

- LAOMUSIC ARTS