Jquery .animate

[Waffle]

hey guys!

$(document).ready(function(){



$("div.Portpic").click(function(){



$("div.Portpic").animate({height:280},"fast");



$("div.Portpic").animate({width:394},"fast");



});

});

This is so div.Portpic goes bigger.. fast.
I’d like to make it return to its original size on another click!

But I can’t seem to crack how… Anyone kindly help me out?

Thanks

Waffle.

[Waffle]

Also, The jquery messes with my footer below the jquery .animate.

Any help with that too?

[TheDoc]

I’m afraid I’m still in the jQuery noob category. I’m sure someone will come along soon and give ya some help.

[Waffle]

Haha thanks Doc.

[Johnnyb]

Try googling jquery toggle, or instead use an if statement on click to check the width of the button and then either enlarge it or shrink it.

John

[whiteInkDesign]

Johnny is right on, with .animate you can’t actually toggle per-say, but you can create a variable like var portSize = “small”; then use an if statement to grow the div on click, resign the variable to something like “big”, and add another if statement that shrinks the div if var portSize = “big”; then assign it back to “small” at the end, making it toggle-like.

[Waffle]

Oh right, thank you.

I think jquery toggle sounds better.

Thanks guys

[whiteInkDesign]

Making .animate toggle-like is way less confusing than I probably made it sound. Here’s the js for it, change the 100 values to whatever your original dimensions are:

[Waffle]

Cool thanks!

[benderz]

And why not getting the ‘width’ & and ‘Height’ effect to toggle at the same function ?

 $("div.Portpic").animate({height:280,width:394},"fast");

&

 $("div.Portpic").animate({height:100,width:100},"fast");

[Author]

Posts