jquery toggle (событие, событие) скрыть показать вопрос

Question

Вызов toggle занимает много времени для загрузки, поэтому я пытаюсь добавить загрузочный img во время загрузки, но, кажется, он не загружается, когда вы .showall активированы, посмотрите на * в следующем коде

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

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

Answer 1

Другой ответ на вызов hide в обратном вызове - это правильный подход, но я решил ответить на вопрос, почему.

Здесь действительно много вопросов. Ваше намерение состоит в том, чтобы показать #loading, затем slideup и, как только это будет завершено, скрыть #loading. Однако, когда вызывается slideup, анимация ставится в очередь и ваш код перемещается, код не ждет завершения slideup, а затем переходит к следующей строке. Вот почему вам нужно использовать обратный вызов для вызова hide после завершения slideup.

Еще одна вещь, которую многие упускают из виду, это то, что show и hide при вызове с продолжительностью являются анимациями и, следовательно, являются очередью, однако, при отсутствии продолжительности эти вызовы НЕ являются анимациями и НЕ ставятся в очередь . Таким образом, вызов show с продолжительностью, а затем немедленный вызов hide без продолжительности никогда не покажет элемент. Посмотрите это для иллюстрации этого: http://jsfiddle.net/zZHhm/ обратите внимание, что вы никогда не видите DIV2.

Кроме того, длительности, передаваемые в show и hide, указаны в миллисекундах, поэтому hide(1) дает продолжительность в 1 миллисекунду (вы можете знать об этом).

Answer 2

Признаюсь, что-то странное происходит при использовании show / hide с параметром или без него. Эта версия работает, но я не знаю, почему эти методы без параметров не ведут себя должным образом.

Код: (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();
        });
    }
);