jQuery模糊悬停效果问题答案

【问题标题】：jQuery blur on hover effect problemsjQuery模糊悬停效果问题
【发布时间】：2013-10-26 13:28:50
【问题描述】：

我又遇到了jQuery的问题，希望有人能帮帮我。

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

我正在重新设计我的投资组合网站，我想列出最后 6 个具有模糊悬停效果的投资组合项目。我设法用一张图片（第二张实际上是第一篇文章）来解决这个问题，但现在我添加了另一个测试组合项目并且有两个问题：

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

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

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

任何帮助都会非常感激。

如何为图像添加某种 ID，以便在仅将鼠标悬停在其中一个上时它们不会全部模糊？

【问题讨论】：

你想模糊吗？还是您只是想使用不透明效果？

标签： jquery css hover blur

【解决方案1】：

我将使用 each(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.
    });
});

【讨论】：

【解决方案2】：

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

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

【讨论】：

感谢您的帮助，但它似乎不起作用......我想我将不得不忘记悬停效果的模糊......

【解决方案3】：

这是完成您想要的事情的一种干净而简单的方法。

var blurredImages = $( '.blur-me' );

blurredImages.on( "mouseenter", function () {
  $( this ).addClass( "blurred" );
})

blurredImages.on( "mouseleave", function () {
  $( this ).removeClass( "blurred" );
})

另外，我建议使用 CSS3 过渡而不是 jquery animate 来进行过渡时间。它要快得多。我将它包含在小提琴中。

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

【讨论】：