Try this.
$("#menu li:not(.selected)").animate({
marginLeft: "-200px"
}, function() {
if ($(this).is(':last')) {
$("#menu").hide();
}
});
On Wed, Aug 5, 2009 at 12:15, Mathieu <mathieu.led...@gmail.com> wrote:
>
> Thanks for your answer Leonardo.
>
> The callback is not called once.
>
> $("#menu li:not(.selected)").animate({
> marginLeft: "-200px"
> }, function() {
> $("#menu").hide();
> alert("Hello");
> });
>
> Hello gets printed many times.
>
> --
> Mathieu
>
> On Aug 5, 3:29 pm, Leonardo K <leo...@gmail.com> wrote:
> > Use the callback function
> >
> > $("#menu li").click(function() {
> > // toggle selected item in list
> > $(this).toggleClass("selected");
> > // animate all other LI elements to disappear (sliding left)
> > $("#menu li:not(.selected)").animate({
> > marginLeft: "-200px"
> > }, function(){
> > $("#menu").hide();
> > });
> >
> > });
> > On Wed, Aug 5, 2009 at 04:01, Mathieu <mathieu.led...@gmail.com> wrote:
> >
> > > Hi all,
> >
> > > I would like to know when a set of animations, started inside an
> > > "each" function, is finished.
> > > In the following example, how can I simply hide the whole #menu
> > > element once LI elements have been fully animated ?
> >
> > > ------------------- HTML
> >
> > > <div id="menu">
> > > <ul>
> > > <li>One</li>
> > > <li>Two</li>
> > > <li>Three</li>
> > > <li>Four</li>
> > > </ul>
> > > </div>
> >
> > > ------------------- JS
> >
> > > // add click behaviour
> > > $("#menu li").click(function() {
> > > // toggle selected item in list
> > > $(this).toggleClass("selected");
> > > // animate all other LI elements to disappear (sliding left)
> > > $("#menu li:not(.selected)").each(function(index, domElement) {
> > > $(this).animate({
> > > marginLeft: "-200px"
> > > });
> > > });
> > > });
>
