CODEWITHSUNDEEP
javascriptjqueryhtmlslideslideup
Tibneo
Tibneo

Reputation: 39

jQuery hover and Slide

I have 20 different divs.

5 class="icon",

5 class="rainskin",

4 class="schoolproject",

4 class="wallpaper", &

2 class="miscellaneous".

Each div has one div with class=".type". I have the header portion (about 27 pixels) of the .type div showing, but the rest of it is hidden. When someone hovers over the .type div, it slides up (by changing the margin-top: to 0px). When the mouse no longer hovers it, it goes back down to its original spot (margin-top: 110px).

Here's my fiddle. and java code.

(function ($) {
    var original = [];
    $('.type').each(function (i) {
        original.push($(this).css('margin-top'));
    });
    $('.type').hover(function (e) {
        $(this).stop().animate(
            {"margin-top" : (
                $(this).parent().outerHeight() - 
                $(this).outerHeight()
            )},
            250
        );
    }, function (i){
        var i = $('.type').index($(this));
        $(this).stop().animate(
            {"margin-top": original[i]},
            250
        );
    });
}(jQuery));

It works perfectly fine, UNLESS someone hovers over one .type div, and goes to hover over another .type div BEFORE the first .type div slides back down. THEN the .icon, .rainkin, .schoolproject, etc. div is moved down a bit. Go to my fiddle and check it out yourself. I don't know why it's doing it.

Upvotes: 1

Views: 252

Answers (1)

Ignacio
Ignacio

Reputation: 1056

when you use "margin-top" you're actually messing with the flow of the css divs, so if you use "top" rather , the position just applies to that div, you also need to set .type as "relative". One other thing, your original position can just be "0", and the amount to pull up can be the size of your .type div.

Check this modification out:

(Test here: http://jsfiddle.net/gfefN/9/ )

(function ($) {
    var original = [];
    $('.type').each(function (i) {
        original.push(0);
    });
    $('.type').hover(function (e) {
        $(this).stop().animate(
            {"top" : -(
                $(this).height()
            )},
            250
        );
    }, function (i){
        var i = $('.type').index($(this));
        $(this).stop().animate(
            {"top": original[i]},
            250
        );
    });
}(jQuery));

Upvotes: 1

Related Questions