CODEWITHSUNDEEP
jqueryjquery-ui
ptamzz
ptamzz

Reputation: 9375

jQuery eased animation

I've my codes as

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
</div>

Each div has a width of 250px & are floated left; When I click a button, I'm using hide('one'); When the div#one disappears, the remaining three divs takes it's empty place and it happens all of a sudden. What I want is, when the div#one disappears, I want the remaining 3 divs to slide to the left slowly.. in a eased manner. How should I do that.

Upvotes: 0

Views: 104

Answers (2)

nonopolarity
nonopolarity

Reputation: 151214

One way is to shrink that div... but if you want a fadeOut and then a shrink, you can first use animate() to change the opacity to 0, and then shrink that div, using also animate(). You can use a callback with the first animate() or queue the two animations together.

Seems like Nick's answer of hide() will fade and shrink at the same time, which might be all you need.

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630607

If you just give a duration to .hide() you're all set, it'll be an animation, like this:

$("#one").hide("slow");

You can test it here.
Note: This works with or without jQuery UI, it's part of jQuery Core

Upvotes: 2

Related Questions