CODEWITHSUNDEEP
javascriptjquery-uijqueryjquery-plugins
Mo.
Mo.

Reputation: 27465

JQuery : how to hide div after animation?

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

Upvotes: 2

Views: 6902

Answers (3)

buley
buley

Reputation: 29238

As a fourth param, animate can take a callback to execute on complete. Alternatively, just use a complete 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),
            complete: function () {
                /* Do hide here */
            }
        });
    });
});

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

Upvotes: 1

Ry-
Ry-

Reputation: 224952

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();
        });
    });
});​

Upvotes: 2

stusmith
stusmith

Reputation: 14103

You can pass a callback to be called on completion:

$(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();
    });
  });
});​

Upvotes: 0

Related Questions