jQuery隐藏显示幻灯片悬停

我在实现的jQ功能中遇到了一些困难。问题在于幻灯片动画在某些尝试中隐藏/显示多次。我希望它在悬停元素后仅显示一次。所有工作正常，但有时在鼠标悬停元素时会褪色几次，所以如果您移动鼠标，但仍然悬停，则不应该发生。我希望每次徘徊时它都会消失，但每次悬停时它只应该动画一次，但有时每次悬停时会多次消失。尝试在悬停时在标题和内容之间移动鼠标。jQuery隐藏显示幻灯片悬停

$(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

感谢，

来源

2015-08-03 Adam

你的小提琴不工作。 – Pratik

对不起，您必须从重定向链接中移除％20http //发生了一些错误的转换 – Adam

只需添加一个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'); 
    }); 
});

来源

2015-08-03 13:24:44

抱歉，这不是我要找的，我只是添加了额外的解释。在我的例子中，所有的工作都很好，但是当你徘徊的时候，有时会消失更多，例如，如果你移动鼠标，它很难重现，但有时会发生 – Adam

@亚当它很难重现你的问题哥们！ –

是的，我知道，请尝试在新闻4标题和下面的内容之间移动鼠标，尝试将鼠标悬停几次并移动到此区域 – Adam

如果你的问题是，你只需要盘旋运行在第一时间你可以取消绑定它时，它与这个$(this).unbind('mouseenter mouseleave')

$(document).ready(function() { 

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

http://jsfiddle.net/bgsx23nc/12/

编辑进入： 或者只在建议的Guruprasad Rao离开

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

    }); 

});

http://jsfiddle.net/Guruprasad_Rao/bgsx23nc/13/

来源

2015-08-03 13:25:01 JSantos

好的解决方法，但我建议在'mouseleave'上保留'$（this）.unbind（'mouseenter mouseleave'）'，因为OP可能希望隐藏相同的内容！ +1虽然！ –

谢谢。你能否详细说明你的评论？没有完全明白你的意思。 – JSantos

喜欢看这个** [demo]（http://jsfiddle.net/Guruprasad_Rao/bgsx23nc/13/）**，一旦'mouseout'那个特定的隐藏事件必须发生，因为他已经为'mouseleave'写了一个！所以保持你的代码行在第二部分！希望它现在明确.. –

jQuery隐藏显示幻灯片悬停

回答

相关问题