CODEWITHSUNDEEP
javascriptjquery
stark
stark

Reputation: 2256

Div: enlarge and resize back to original on hover out

I am trying to expand a div to a particular size on hover in and I want the div to go back to its original size on hover out, using the animate function.

Is there any way by which I could calculate the original size of the div to be used in animate?

Upvotes: 0

Views: 2337

Answers (2)

yckart
yckart

Reputation: 33438

You have to store the original state outside/before your eventhandler:

var origHeight = $("div").outerHeight(true);

$("div").hover(function(e){
    $(this).stop().animate({
        height: e.type === "mouseenter" ? $(window).height() : origHeight
    });
});

http://jsfiddle.net/b5HUU/2/

By the way, it's not an good idea to do that on hover... Because there's no space for the mouse to leave (except the whole browser).

Update

So it's better to use a click-event:

var origHeight = $("div").outerHeight(true),
    clickState = false;

$("div").click(function(e){
    clickState = !clickState;
    $(this).stop().animate({
        height: clickState ? $(window).height() : origHeight
    });
});

http://jsfiddle.net/b5HUU/4/

Upvotes: 2

rab
rab

Reputation: 4144

you need to stop animate on mouseenter and mouseleave

var w = $('#an').width(),
    n = w + 100 ; // particular size

function widthAnimate( width ){
    return function(){
        $('#an').stop().animate({
            width : width +'px',
        });
    }
};

$('#an').mouseenter( widthAnimate( n ) )
       .mouseleave( widthAnimate(w ));

Added this in jsfiddle

Upvotes: 0

Related Questions