Question

我再次遇到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，这样当它们只悬停在其中一个上时它们并不都会模糊？

Answer 1

我会使用每个（函数）将它们全部分开，而不仅仅是悬停。它们不应该是不同的功能，真的......保持事情更清洁，更容易调试。

$(".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不会为两个图像创建模糊的画布，我的建议是尝试使用.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 animate进行过渡时间。它快得多。我把它包括在小提琴中。

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

jQuery模糊悬停效果问题

3 个答案: