Make animation occur only on “current” div

[OlafG]

http://dev.olafg.com/mc/work/

When you’re hovering one of the thumbnails the title animates up. What do I need to do to make it animate only on the div that is actually being hovered and not all the ones with the same class?

$(".portfolio-entry").mouseover(function(){

$(".portfolio-heading").animate({

"margin-top": "-30px",

}, 200 );



$(".portfolio-entry").mouseleave(function(){

$(".portfolio-heading").animate({

"margin-top": "5px",

}, 200 );

})

})

[jsweazy]

I believe if you add , “this” to your selector it will help. so like this:

$(".portfolio-entry").mouseover(function(){

$(".portfolio-heading",this).animate({

"margin-top": "-30px",

}, 200 );



$(".portfolio-entry").mouseleave(function(){

$(".portfolio-heading",this).animate({

"margin-top": "5px",

}, 200 );

})

})

[dhechler]

Actually, i think it would be

$(".portfolio-entry").mouseover(function(){

$this.(".portfolio-heading").animate({

"margin-top": "-30px",

}, 200 );



$(".portfolio-entry").mouseleave(function(){

$this.(".portfolio-heading").animate({

"margin-top": "5px",

}, 200 );

})

but maybe I’m incorrect on that.

[Rob MacKay]

nearly but:

$(".portfolio-entry").mouseover(function(){

$(this + " .portfolio-heading").animate({

"margin-top": "-30px",

}, 200 );



$(".portfolio-entry").mouseleave(function(){

$(this + " .portfolio-heading").animate({

"margin-top": "5px",

}, 200 );

})

[OlafG]

All of the examples worked! Thank you very much! Great forum.

[Rob MacKay]

haha awesome :D

[Author]

Posts