jQuery blur on hover effect problems

问题

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

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

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:

i only get the blurred image of the first post (second image), the image of the second post doesn't get it's own blurred version image
the second problem is that when I hover over one image it triggers animation for the second one, too

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

any help would be really appretiatied guys.

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?

回答1:

Instead of just a hover, I would use an each(function) to keep them all separate. They should not be in different functions, really...keeps things cleaner and easier to debug this way.

$(".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:

You don't need to use an ID, you should be able to call .find("normal_image") which will search all descendant elements. Conversely, you could use .closest() to search all ancestor elements for the closest matching element.

I'm not sure why pixastic is not creating a blurred canvas for both images, my suggestion would be to try using a .each(function() { pixastic(blur) }) with the selector.

回答3:

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

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

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

来源：https://stackoverflow.com/questions/12440322/jquery-blur-on-hover-effect-problems

标签

jquery

css

hover

blur