Question

我在我实施的其中一项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');

});

}）;

Testing on jsfiddle

谢谢，

Answer 1

如果您的问题是您只希望悬停在第一次运行时可以在进入此$(this).unbind('mouseenter mouseleave')

时解除绑定

$(document).ready(function() {

    $('.latest_module').hover(function(){
        $(this).unbind('mouseenter mouseleave')
        ...

https://www.example.com/file.jsonp

修改或者仅在休假时由http://jsfiddle.net/bgsx23nc/12/建议

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

Guruprasad Rao

Answer 2

只需向滑动class添加element，然后从下次检查是否已经class，如果是，请不要执行以下任何操作：

<强> DEMO

$(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');
    });
});

jQuery隐藏显示幻灯片悬停

2 个答案: