带有动画的鼠标和鼠标离开

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

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

Answer 2

您要做什么行为？也许您可以在开始动画之前停止对所有其他动画进行动画处理]

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

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（）{

Answer 4

鼠标事件离开元素时，将调度鼠标事件以进行详细信息。这种情况下，任何HTML详细信息都可以获取https://reviewsbuyer.com/best-fps-mouse/