CODEWITHSUNDEEP
jqueryhtmlcssanimationwidth
Eyal Binehaker
Eyal Binehaker

Reputation: 325

shorter jquery code for div width animation

I am trying to write a jquery code for animating div width change on hover, I don't want to use css because I want to be able to support older browsers. I wrote this jquery code for expanding and shriking the div on mouse hover/mouseout:

$('.menu').hover(function(){
    $('.menu').animate( { width: "350px" }, 400 );
});
$('.menu').mouseout(function(){
    $('.menu').animate( { width: "50px" }, 400 );
});

this is the div css:

.menu { height: 500px; width: 50px; }

I am not sure, but the Jquery code feels a bit to long for such a simple action, is there a way to make it shorter?

thanks in advance, Eyal.

Upvotes: 1

Views: 134

Answers (2)

Viken Patel
Viken Patel

Reputation: 446

You can write like below

$('.menu').hover(function(){
    $(this).animate( { width: "350px" }, 400 );
},function(){
    $(this).animate( { width: "50px" }, 400 );
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

what about

$('.menu').hover(function (e) {
    $(this).stop(true, true).animate({
        width: e.type == 'mouseenter' ?
            "350px" : '50px'
    }, 400);
});

Demo: Fiddle

Upvotes: 3

Related Questions