jquery toggle(event,event) hide show question

Calling toggle takes a long time to load, so I'm trying to add a loading img while loading but it doesn't seem to load when you .showall is activated look at * in the following code

$('#loading').hide();

$(".showall").toggle(
 fun开发者_如何学Goction(){ 
   $('#loading').show(1); // * added
   $(".toggle_container").slideDown();
   $('#loading').hide(); // * added
  },
 function () { 
   $('#loading').show(1); // * added
   $(".toggle_container").slideUp();
   $('#loading').hide(); // * added
 }  
);

The other response of calling hide in the callback is the correct approach, but I figured I'd answer to point out why.

There are actually multiple issues here. Your intention is to show #loading then slideup and once that is complete, hide #loading. However, when slideup is called, the animation is queued up and your code moves on, the code does not wait for slideup to complete and then move on to the next line. This is why you need to use the callback, to call hide after slideup completes.

Another thing that many people overlook is that show and hide when called with a duration are animations and are therefore queue, however, when no duration is passed these calls are NOT animations and will NOT be queued. So, calling show with a duration and then immediately calling hide with no duration will never show the element. See this for an illustration of that: http://jsfiddle.net/zZHhm/ notice that you never see DIV2.

Also, the durations passed to show and hide are in milliseconds, so hide(1) gives a duration of 1 millisecond (you may be aware of this).

I admit, something weird is happening while using show/hide with or without parameter. This version works, but I don't know why these methods without parameters doesn't behave as they should.

Code: ( http://jsfiddle.net/z3HRQ/2/ )

$('#loading').hide(1);

$('.showall').toggle(
    function () {
        $('#loading').show(1);
        $('.toggle_container').slideUp(function () {
            $('#loading').hide();
        });
    },
    function () {
        $('#loading').show(1);
        $('.toggle_container').slideDown(function () {
            $('#loading').hide();
        });
    }
);