CODEWITHSUNDEEP
jquery
abrahab
abrahab

Reputation: 2500

Jquery toggle timeout that hide

I am trying to hide div by timeout after show it by toggle. To show it I use $('#slidable').animate({width: 'toggle'}); I add .delay(2000).hide(); but seems its does not work. Why?

Code:

<script>
  jQuery(document).ready(function($) {
    $( "#side" ).click(function() {
     $('#slidable').animate({width: 'toggle'}).delay(2000).hide();
      });
  })
</script>

Upvotes: 1

Views: 1775

Answers (3)

zord
zord

Reputation: 4783

You need to use the "complete" callback of animate(). This way the delay starts, when the toggle finished. For example:

$('#slidable').animate({
        width: 'toggle'
    }, 400, function () {
        $('#slidable').delay(2000).hide();
    })
});

Upvotes: 1

adeneo
adeneo

Reputation: 318182

hide() is only an animated method if a speed is passed, otherwise it's not added to the fx queue, and delay() won't work :

$('#slidable').animate({width: 'toggle'}).delay(2000).hide(1);

You could even pass zero !

Upvotes: 1

PSL
PSL

Reputation: 123739

Best way you can handle this is using the complete callback of animate, since hide without any duration is not passed into the fx queues.

$('#slidable').animate({width: 'toggle'}, function(){
    $(this).hide();
});

Upvotes: 1

Related Questions