CODEWITHSUNDEEP
javascriptjquery
user1617218
user1617218

Reputation:

.animate to one element

I´m doing an animation hover using this function:

    function lookbookhover(){
        var lookbook = $('.lookbook_info')
        lookbook.bind({
            'mouseenter' : function(){
                lookbook_animate(200)
            },
            'mouseleave' : function(){
                lookbook_animate(30)
            }
        })
    }
    function lookbook_animate(h){
        $('.lookbook_info').animate({
            height: h
        }, 300 );
    }

The problem I have is that when the user hovers one item (.lookbook_info) it animates all the others .lookbook_info that are on the page, how can I point to just animate just one element?

I know it´s using $(this) but I haven´t get the result.

Upvotes: 0

Views: 43

Answers (2)

adeneo
adeneo

Reputation: 318182

Just pass the element to the function:

function lookbookhover(){
    $('.lookbook_info').on({
        mouseenter : function(){
            lookbook_animate(this, 200);
        },
        mouseleave : function(){
            lookbook_animate(this, 30);
        }
    });
}
function lookbook_animate(elem, h){
    $(elem).stop(true,true).animate({
        height: h
    }, 300 );
}

DEMONSTRATION

Upvotes: 2

Talha Akbar
Talha Akbar

Reputation: 10030

You can use $(this) if you want to point that element on which event occured or if you want to select specific elements such as maybe first, last, or nth-child:

$(element:first)

$(element:last)

$(element:nth-child(2))

You need to pass this as argument to that function.

Upvotes: 0

Related Questions