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');
});
});
感谢,
只需添加一个class
到滑动element
,然后从下一次检查,如果有class
已经若是没有做任何事情像一个下面:
$(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');
});
});
如果你的问题是,你只需要盘旋运行在第一时间你可以取消绑定它时,它与这个$(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')
});
});
好的解决方法,但我建议在'mouseleave'上保留'$(this).unbind('mouseenter mouseleave')',因为OP可能希望隐藏相同的内容! +1虽然! –
谢谢。你能否详细说明你的评论?没有完全明白你的意思。 – JSantos
喜欢看这个** [demo](http://jsfiddle.net/Guruprasad_Rao/bgsx23nc/13/)**,一旦'mouseout'那个特定的隐藏事件必须发生,因为他已经为'mouseleave'写了一个!所以保持你的代码行在第二部分!希望它现在明确.. –
你的小提琴不工作。 – Pratik
对不起,您必须从重定向链接中移除%20http //发生了一些错误的转换 – Adam