jQuery模糊悬停效果问题 [英] jQuery blur on hover effect problems

问题描述

我有一个问题，jQuery再次，我希望有人可以帮助我。

i have a problem with jQuery again, I hope someone can help me out.

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

please view the Portfolio section here http://matoweb.com (there should be two items)

我重新设计了我的投资组合网站我想列出最后6个投资组合项目与模糊悬停效果。我设法让这个工作与一个图像（第二个实际上是第一个帖子），但现在我添加了另一个测试组合项目，并有两个问题：

I'm redesigning my portfolio website and I want to list last 6 portfolio items with a blur hover effect. I managed to get this working with one image (the second one that was actually the first post) but now I added another test portfolio item and have two problems:

• 我只得到第一个帖子（第二个图像）的模糊图像，第二个帖子的图像不会得到它自己的模糊版本图像


• 第二个问题是

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

here is the code for these effects, but you may view it in action on website:

        $(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人。

any help would be really appretiatied guys.

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

How could I add some sort of ID to the images, so that they don't all blur when hovering over only one of them?

推荐答案

这是一种干净简单的方式来完成你想要的。

This is a clean and simple way to accomplish what you want.

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

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

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

此外，我建议使用CSS3过渡，而不是jquery动画的过渡时间。它快得多。

Also, I recommend using CSS3 transition instead of jquery animate for transition timing. It's much faster. I included it in the fiddle.

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

Here is a jsfiddle: http://jsfiddle.net/4mE3b/

这篇关于jQuery模糊悬停效果问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！