CODEWITHSUNDEEP
jqueryhtmlcss
Kasim Ahmic
Kasim Ahmic

Reputation: 312

Change The Top Margin Relative To The P Tag With jQuery

I want to have several div's with p tags inside of them but not visible. Then whenever you hover over the div's, the p tags margin-top value changes to the negative value of its height. For example:

The 1st p's height is 60px and it's margin-top value is 0. You hover over its containing div. The 1st p's margin-top value changes to the negative value of its height which is 60px causing the p to move up.

The 2nd p's height is 40px and it's margin-top value is 0. You hover over its containing div. The 2nd p's margin-top value changes to the negative value of its height which is 40px causing it to move up.

Here's the code I plan on using:

$(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 already have something very close to that set up here: http://jsfiddle.net/yryRZ/1/

The only problem I'm having is that all of the p's move up by the same amount and not relative to their own height. It seems that they all go up by the first p's height.

What can I do to fix this?

Upvotes: 2

Views: 283

Answers (2)

Horen
Horen

Reputation: 11382

You could use a position: relative > position: absolute structure and animate the bottom attribute: http://jsfiddle.net/yryRZ/3/

Upvotes: 1

Ram
Ram

Reputation: 144709

Instead of selecting all the p tags, you can use $(selector, context).

$(document).ready(function() {
    $("div.works div").hover(function() {
        var $p = $('p', this);
        $p.stop().animate({
            marginTop: - $p.outerHeight()
        }, 250);
    } , function() {
        $('p', this).stop().animate({
            marginTop: "0"
        }, 250);
    });
});

http://jsfiddle.net/QCect/

Upvotes: 2

Related Questions