I would like to hide dive after the animation. Is it possible ?

I can show you code here

$(document).ready(function() {
  $('button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$lefty.outerWidth() :
        0
    });
  });
});​

Demo

I would like to hide dive after the animation. Is it possible ?

I can show you code here

$(document).ready(function() {
  $('button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$lefty.outerWidth() :
        0
    });
  });
});​

Demo

• javascript
• jquery-ui
• jquery
• jquery-plugins

• Which <div> do you want to hide? #main? Or do you want to remove the <div> that was animated entirely? – Ry- ♦ Commented Apr 2, 2012 at 14:01
• @minitech i need to hide div1 to show div2 – Mo. Commented Apr 2, 2012 at 14:04

3 Answers 3

Pass a callback to animate as the second argument. Also, you'll need to change .next() to something else to find only the first child, and there are a few other optimizations that can be made. Your CSS is also wrong. Here's the updated jsFiddle.

$(document).ready(function() {
    $('button').click(function() {
        var $lefty = $(this).next().children().eq(0);

        $lefty.animate({
            left: -$lefty.outerWidth()
        }, function() {
            $lefty.next().show();
            $lefty.remove();
        });
    });
});​

As a fourth param, animate can take a callback to execute on plete. Alternatively, just use a plete attribute on your options object.

$(document).ready(function () {
    $('button').click(function () {
        var $lefty = $(this).next();
        $lefty.animate({
            left: (parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0),
            plete: function () {
                /* Do hide here */
            }
        });
    });
});

Hide the div in there perhaps by calling hide() on this.

You can pass a callback to be called on pletion:

$(document).ready(function() {
  $('button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$lefty.outerWidth() :
        0
    }, function () {
      $lefty.hide();
    });
  });
});​