display 'loading' at the beginning of a function not working/happens too fast

I have this expression:

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

please note i removed in the question many expresions.

the situation is that this works great in all browsers but in IE6 it takes 10x times loger to be executed (i'm talking about 7 seconds or so!) so i'm trying to show <div class="nInfoIE"> at the beggining (contains a loding image) and to hide it at the end,

But it seems that it's all executed at the same time or something, because i can never see the nInfoIe content,

how can i make sure i will see it before and then the rest is executed?

-EDIT- html code:

<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>

---

I can only assume that the 'more code' section works with one or more ajax requests. After the ajax request is fired, the next expression is handled even if the ajax request isn't done yet. You should hide the loading image in the complete event of the ajax request.

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

If there are multiple ajax requests it gets a bit more complicated, you'd have to nest them or use some sort of ajax queue manager.

---

Well, you provided code, but I can't see any element with a classname "nInfoIE", which is kinda relevant here.

BUT, i did notice your selector:

$('nInfoIE').show();

Since you're trying to get an element by classname, you must specifiy "." in front of it. It should be

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