I wish to create multiple div elements with nested p tags that are initially hidden. Upon hovering over each div, I want the corresponding p tag to move up by the negative value of its own height. For instance:
The first p tag has a height of 60px and a margin-top value of 0. Upon hovering over its parent div, the margin-top value of the first p tag changes to -60px, causing it to shift upwards.
The second p tag has a height of 40px and a margin-top value of 0. When hovering over its parent div, the margin-top value of the second p tag changes to -40px, moving it upwards.
Here is the code snippet I intend to use:
$(document).ready(function() {
$("div.works div").hover(function() {
$(this).find("p").stop().animate({
marginTop: -$("p").outerHeight()
}, 250);
} , function() {
$(this).find("p").stop().animate({
marginTop: "0"
}, 250);
});
});
I have a similar setup running here: http://jsfiddle.net/yryRZ/1/
The issue I am encountering is that all p tags move up by the same amount, instead of relative to their individual heights. It appears that they are all shifting by the height of the first p tag.
How can I resolve this problem?