如何防止jQuery .hover函数同时影响所有图像？

我不确定标题是否足够好解释，但试图保持它很短！如何防止jQuery .hover函数同时影响所有图像？

所以，我有一些分散在一个页面周围的图像，并为它们创建了一个lightbox库（.cboxElement是调用它的类）。我想添加到这是一个悬挂效果对每个图像影响的灯箱，所以用户知道它可以放大。

问题：

我没有写该网站的原代码，这是一个新的功能。由于整个图像的各种类的不一致，我在前面加上了悬停的方法是指一类独特的每个图像前的标记，如下所示：

$("a.cboxElement").each(function(){ 
     $(this).prepend("<span class='zoom'></span>"); 
    });

紧接着这一点，我已经使用了悬停效果：

$("a.cboxElement").hover(function(){ 
     $("a.cboxElement span").fadeIn('fast'); 
    }, 
    function(){ 
     $("a.cboxElement span").fadeOut('fast'); 
    });

的问题是，当我将鼠标悬停在页面上的图片，悬停效果每幅图像上同时出现，我不知道如何得到它只会影响我徘徊在图像过度。

有没有人有什么想法，我可以做什么？

非常感谢，

乔恩

来源

2011-08-26 Jon

位新的这个所以希望我把这个在正确的地方！只是想添加其他东西，我发现任何人发现此线程有用，通过在.find后面添加.stop（true，true）它立即停止当前动画并开始下一个 - 如果有人在开始/以前的效果已经完成，否则动画与用户操作不及时。发现信息在这里 - http://stackoverflow.com/questions/5722758/jquery-fadetoggle-if-currently-animated-ignore-further-input – Jon

我想你只需要改变的范围你的悬停作业：

$("a.cboxElement").hover(function(){ 
    $(this).find("span").fadeIn('fast'); 
}, 
function(){ 
    $(this).find("span").fadeOut('fast'); 
});

您的原始代码是这样说的：对于每个a.cboxElement，找到所有a.cboxElement元素'span s并淡入/淡出。上面的代码说每个a.cboxElement，悬停时，找到span只是这a.cboxElement并淡入/淡出。

来源

2011-08-26 13:41:31

干杯科里，完美的作品！感谢您解释我原来的代码实际上在说什么，非常有用 – Jon

@Jon，欢迎您，欢迎来到SO。对于您找到有用且准确的答案，请记得点击旁边的复选标记将其标记为“已接受”答案。 –

@CoryAll完成 - 不会让我投票，但没有足够的代表！ – Jon

分配一个id="..."属性，每一个图像，然后选择它，而不是整个a.cboxElement类：

<img id="imageid1" ... > 
$('#imageid1')....

来源

2011-08-26 13:40:40 Blazemonger

$("a.cboxElement").hover(function(){ 
    $(this).find('span:first').fadeIn('fast'); 
}, 
function(){ 
    $(this).find('span:first').fadeOut('fast'); 
});

来源

2011-08-26 13:41:41

此外，您还可以使用.fadeToggle与单一功能：

$("a.cboxElement").hover(function(){ 
    $(this).find("span").fadeToggle("fast"); 
});

来源

2011-08-26 13:44:38 karim79

只要我看到这个，我想，是的，这就是我应该做的 - 但由于某种原因，它不工作...我会玩弄它，看看我得到什么，但为理念 – Jon

如何防止jQuery .hover函数同时影响所有图像？

回答

相关问题