jQuery模糊hover效果问题

我再次遇到jQuery的问题，希望有人可以帮助我。

请在http://matoweb.com查看投资组合部分（应该有两个项目）

我正在重新设计我的投资组合网站，我想列出具有模糊hover效果的最后6个投资组合项目。 我设法使用一个图像（第二个实际上是第一个post），但现在我添加了另一个测试组合项并有两个问题：

• 我只得到第一个post（第二个图像）的模糊图像，第二个post的图像没有得到它自己的模糊版本图像
• 第二个问题是，当我将鼠标hover在一个图像上时，它也会触发第二个图像的动画

这是这些效果的代码，但您可以在网站上查看它：

$(window).load(function(){ $(".img_portfolio").pixastic("blurfast", {amount:1}); }); $(function() { $(".prva_stran_portfolio_single").mouseenter(function () { $(".normal_image").fadeOut("fast"); }).mouseleave (function () { $(".normal_image").fadeIn("fast"); }); }); $(function() { $(".roll").css("opacity","0"); $(".roll").hover(function () { $(this).stop().animate({ opacity: 0.9 }, "fast"); }, function () { $(this).stop().animate({ opacity: 0 }, "fast"); }); }); 

任何帮助将是真正的appretiatied家伙。

我怎么能在图像上添加某种ID，这样当它们只hover在其中一个上时它们并不都会模糊？

Answer 1

我会使用每个（函数）将它们全部分开，而不仅仅是hover。 它们不应该具有不同的function，真的……保持事物更清洁，更容易调试。

 $(".prva_stran_portfolio_single").each(function(){ $(this).hover(function(){ Run everything that happens on a hover (mouse in) here. },{ Run everything that happens on a hover (mouse out) here. }); }); 

Answer 2

您不需要使用ID，您应该能够调用.find("normal_image")来搜索所有后代元素。 相反，您可以使用.closest()在所有祖先元素中搜索最接近的匹配元素。

我不确定为什么pixastic不会为两个图像创建一个模糊的canvas，我的建议是尝试使用.each(function() { pixastic(blur) })和选择器。

Answer 3

这是一种干净简单的方法来实现您的目标。

 var blurredImages = $( '.blur-me' ); blurredImages.on( "mouseenter", function () { $( this ).addClass( "blurred" ); }) blurredImages.on( "mouseleave", function () { $( this ).removeClass( "blurred" ); }) 

此外，我建议使用CSS3过渡而不是jquery动画来实现过渡时间。 它要快得多。 我把它包括在小提琴里。

这是一个jsfiddle： http ： //jsfiddle.net/4mE3b/