отображение «загрузки» в начале функции не работает / происходит слишком быстро

Question

У меня есть это выражение:

$('#animationNext,#animationPrev').bind('mousedown',function(){        
    $('.nInfoIE').show();
    $('ul.roundabout-holder li').find('.iframe').css({'visibility':'hidden'});
    $('ul.roundabout-holder li').find('.iframe').addClass('esconder');

    // more code...

    watching = false;
    $('.nInfoIE').hide();
});

обратите внимание, я удалил в вопросе много выражений.

Ситуация такова, что это прекрасно работает во всех браузерах, но в IE6 это занимает 10 раздолжен быть выполнен логер (я говорю о 7 секундах или около того!), поэтому я пытаюсь показать <div class="nInfoIE"> в начале (содержит изображение кодирования) и скрыть его в конце,

Нокажется, что все выполняется одновременно или что-то в этом роде, потому что я никогда не вижу контент nInfoIe,

как я могу убедиться, что увижу его раньше, а затем выполнится все остальное?

-EDIT- HTML-код:

<ul class="roundabout-holder" style="padding: 0px; position: relative; z-index: 100;">
    <li class="roundabout-moveable-item roundabout-in-focus" style=
    "position: absolute; left: 157.2px; top: -0.8px; width: 240px; height: 160px; opacity: 1; z-index: 400; font-size: 16px;"
    current-scale="1.0000">
      <a href="#" title="video#1"><img src="http://img.youtube.com/vi/qZ9jpnMGkdA/0.jpg"
      class="thumbImg"><img alt="video#1" class="playIcon" src=
      "img/playIcon.png"><span class="titulo titThumb">video#1</span></a>

      <div class="iframe esconder">
        <iframe width="560" height="315" frameborder="0" allowfullscreen="" src=
        "http://youtube.com/embed/qZ9jpnMGkdA"></iframe>
      </div><span class="titulo titIframe">video#1</span>
    </li>

    <li class="roundabout-moveable-item" style=
    "position: absolute; left: -58.8px; top: 23.2px; width: 168px; height: 112px; opacity: 0.7; z-index: 250; font-size: 11.2px;"
    current-scale="0.7000">
      <a href="#" title="video#2"><img src="http://img.youtube.com/vi/hurnoKLuBD8/0.jpg"
      class="thumbImg"><img alt="video#2" class="playIcon" src=
      "img/playIcon.png"><span class="titulo titThumb">video#2</span></a>

      <div class="iframe esconder">
        <iframe width="560" height="315" frameborder="0" allowfullscreen="" src=
        "http://youtube.com/embed/hurnoKLuBD8"></iframe>
      </div><span class="titulo titIframe">video#2</span>
    </li>

    <li class="roundabout-moveable-item" style=
    "position: absolute; left: 229.2px; top: 47.2px; width: 96px; height: 64px; opacity: 0.4; z-index: 100; font-size: 6.4px;"
    current-scale="0.4000">
      <a href="#" title="video#3"><img src="http://img.youtube.com/vi/Lk_WoaLUPdA/0.jpg"
      class="thumbImg"><img alt="video#3" class="playIcon" src=
      "img/playIcon.png"><span class="titulo titThumb">video#3</span></a>

      <div class="iframe esconder">
        <iframe width="560" height="315" frameborder="0" allowfullscreen="" src=
        "http://youtube.com/embed/Lk_WoaLUPdA"></iframe>
      </div><span class="titulo titIframe">video#3</span>
    </li>

    <li class="roundabout-moveable-item" style=
    "position: absolute; left: 445.2px; top: 23.2px; width: 168px; height: 112px; opacity: 0.7; z-index: 250; font-size: 11.2px;"
    current-scale="0.7000">
      <a href="#" title="video#4"><img src="http://img.youtube.com/vi/m5ykAFtQgQ0/0.jpg"
      class="thumbImg"><img alt="video#4" class="playIcon" src=
      "img/playIcon.png"><span class="titulo titThumb">video#4</span></a>

      <div class="iframe esconder">
        <iframe width="560" height="315" frameborder="0" allowfullscreen="" src=
        "http://youtube.com/embed/m5ykAFtQgQ0"></iframe>
      </div><span class="titulo titIframe">video#4</span>
    </li>
  </ul>

Answer 1

Я могу только предположить, что раздел 'more code' работает с одним или несколькими ajax-запросами.После запуска запроса ajax следующее выражение обрабатывается, даже если запрос ajax еще не выполнен.Вы должны скрыть загрузочное изображение в завершенном событии ajax-запроса.

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  complete: function() { watching = false;
                    $('nInfoIE').hide(); }
});

Если есть несколько ajax-запросов, это становится немного сложнее, вам придется их вкладывать или использовать какой-то ajaxадминистратор очередей.

Answer 2

Хорошо, вы предоставили код, но я не вижу ни одного элемента с именем класса "nInfoIE", которое здесь уместно.

НО, я заметил ваш селектор:

$('nInfoIE').show();

Поскольку вы пытаетесь получить элемент по имени класса, вы должны указать "." перед ней. Должно быть

$('.nInfoIE').show();