Why does jQuery fadeOut not work inside this setInterval loop?

Question

I'm trying to load random items into a div every few seconds, with a nice fadeOut/fadeIn transition between each load. Here's the code:

<html>
  <body>
    <div id="item"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      // Load a random item
      var item = $('#item');
      function load_item() {
        item.fadeOut(5000, function() {
          item.load('http://dynamic.xkcd.com/comic/random/ #middleContent img', null, function() {
            item.fadeIn(5000);
          });
        });
      };

      // Load initial featured item
      load_item();

      // Schedule repeated loading
      setInterval(load_item, 15000);
    </script>
  </body>
</html>

This works fine the first time through, but on subsequent calls to load_item, the fadeOut() seems to stop working. It doesn't actually fade the #item div out, but jumps immediately into the callback function, ignoring the 5000 delay.

What am I doing wrong?

It seems to be working fine for me, I tried it on Firefox 3.5 — JasonWyatt
Maybe when load_item() is called second time fadeout immediately calls callback function because #item is already hidden, so fadeOut does not do 5000 ms animation? — Roman
That's what I was thinking, but the #item div is visible (I can see it), so I don't know why fadeOut() thinks it's hidden. — claymation
I think you haven't posted enough code. Could you post a complete running example demonstrating the problem, but preferably as few lines as possible, i.e. just the important lines? — Mark Byers
It doesn't work for me in Safari 3 or Firefox 3.5.5. It sort of looks like it's working in Firefox—the div loads new content and fades in—but it doesn't fade out. — claymation

Kit MacAllister Kit MacAllister · Accepted Answer · 2010-06-17T22:31:40

setInterval("load_item()",15000)

I know it looks funny to put it in quotes, but it works.

The other option is to say:

load_item = function(){...etc...};
setInterval(loadItem,1500)

Why does jQuery fadeOut not work inside this setInterval loop?

1 Answers