Javascript jQuery隐藏显示幻灯片悬停

我在我实现的jQ特性中遇到了一些困难。问题是幻灯片动画在某些尝试中多次隐藏/显示。我希望它在悬停元素后只显示一次。 一切正常，但当鼠标悬停在元素上时，有时会褪色几次，所以如果移动鼠标但仍悬停在元素上，则不会发生这种情况。我想它淡入淡出每次你悬停，但它应该只动画一次每次悬停，但有时是淡出几次额外的每次悬停。当鼠标悬停时，尝试在标题和内容之间移动鼠标

$(document).ready(function() {

$('.latest_module').hover(function(){

    var front = $(this).children('.cb-article-meta');
    var back = $(this).children('.cb-article-meta-hover');
    var backh2 = $(this).children('.cb-article-meta-hover').children('h2');
    var backp = $(this).children('.cb-article-meta-hover').children('p');
    var img = $(this).children('.cb-grid-img');
    $(front).css('display','none');
    $(back).css('display','block');
    $(img).addClass('latest_module_hover');
    $(backh2).hide().show("slide", { direction: 'right' },800).css('padding','0 20px');
    $(backp).hide().show("slide", { direction: 'left' }, 800).css('padding','0 20px');

},function(){

    var front = $(this).children('.cb-article-meta');
    var back = $(this).children('.cb-article-meta-hover');
    var img = $(this).children('.cb-grid-img');
    $(front).css('display','block');
    $(back).css('display','none');
    $(img).removeClass('latest_module_hover');

});

}))

---

谢谢，

只需在滑动的

元素中添加一个
类
，然后从下一次开始检查它是否已经有
类
，如果是，请不要执行以下操作：


$(document).ready(function() {
    $('.latest_module').hover(function(){
        if(!$(this).hasClass('hoverDone')) //check if it has class and if no then
        {
            $(this).addClass('hoverDone'); //add class once hover done
            var front = $(this).children('.cb-article-meta');
            var back = $(this).children('.cb-article-meta-hover');
            var backh2 = $(this).children('.cb-article-meta-hover').children('h2');
            var backp = $(this).children('.cb-article-meta-hover').children('p');
            var img = $(this).children('.cb-grid-img');
            $(front).css('display','none');
            $(back).css('display','block');
            $(img).addClass('latest_module_hover');
            $(backh2).hide().show("slide", { direction: 'right' },800).css('padding','0 20px');
            $(backp).hide().show("slide", { direction: 'left' }, 800).css('padding','0 20px');
        }
    },function(){
        var front = $(this).children('.cb-article-meta');
        var back = $(this).children('.cb-article-meta-hover');
        var img = $(this).children('.cb-grid-img');
        $(front).css('display','block');
        $(back).css('display','none');
        $(img).removeClass('latest_module_hover');
    });
});

如果您的问题是您只想在第一次运行hover，那么当它以this
$（this.unbind（'mouseenter mouseleave'）


编辑：
或如仅在休假时提出的建议

...
 $(img).removeClass('latest_module_hover');
         $(this).unbind('mouseenter mouseleave')

    });

});

你的提琴不工作。很抱歉，你必须从重定向链接中删除%20http/，出现了一些错误的转换。这是一个很好的解决方案，但我建议保留
$（这个）。在
mouseleave
上解除绑定（'mouseenter mouseleave'）
，因为OP可能希望在显示时隐藏相同的内容+1尽管如此！谢谢你能详细说明你的评论吗？我不太明白你的意思。就像你看到的，一旦
mouseout
那个特定的隐藏事件必须发生，就像他为
mouseleave
写的一样！所以在第二部分中保留您的代码行！希望现在一切都清楚了。我编辑了这条信息，将两种解决方案都包括在内，让OP来决定他想要什么。抱歉，这不是我想要的，我只是补充了额外的解释。在我的例子中，一切都很好，但有时在你悬停时会褪色不止一次，例如，如果你移动鼠标，很难复制，但有时会发生。对不起，这不是我要找的，我只是添加了额外的解释。在我的例子中，一切都很好，但有时在你悬停时会褪色不止一次，例如，如果你移动鼠标，很难重现，但有时会happens@Adam很难重现你的问题，伙计！！是的，我知道，请尝试在新闻4标题和下面的内容之间移动鼠标，尝试悬停几次并将其移动到此区域是的！！我试过了，但我确实觉得鼠标焦点在某个地方消失了，这玩意儿不会出毛病！！还是不确定你的情况！！
...
 $(img).removeClass('latest_module_hover');
         $(this).unbind('mouseenter mouseleave')

    });

});