CODEWITHSUNDEEP
javascriptjqueryhtml
user1617218
user1617218

Reputation:

jQuery Hover mouseenter mouseleave

i´m trying to do a hover effect using this script:

function itemhover(){
    $(".item").mouseenter(function(){
        $(".mask").fadeIn();
    })
    $(".item").mouseleave(function(){
        $(".mask").fadeOut();
    })
}

The problem is that when I hover over any item it fades in the .mask of all, how can I point the function to just work on the item that is being hovered?

Also when I pass the mouse in and out on the item real quick, the fade effects goes crazy, is like it doesn´t stop, then it stop after a while, why is that?

thanks

Upvotes: 1

Views: 358

Answers (2)

s.lenders
s.lenders

Reputation: 1149

you can use the this statement

$(".mask",this).fadeIn();

Upvotes: 0

BumbleB2na
BumbleB2na

Reputation: 10743

It sounds like your .mask element is contained within your .item element. If that is the case, then you can use $(this) to "set the scope" of the item being hovered (this refers to the item being hovered).

function itemhover(){
    $(".item").mouseenter(function(){
        $(this).find(".mask").stop(true, true).fadeIn();
    })
    $(".item").mouseleave(function(){
        $(this).find(".mask").stop(true, true).fadeOut();
    })
}

Also, you might want to chain .stop(true, true) before your fade animation effect to stop any previously queued animations and to jump to the end of the last queued animation.

Upvotes: 1

Related Questions