Error while using jquery animate “Out of memory at line: 13”

Question

I am trying to display my products animation with the following code (jquery)

var prodNum = <%=prodNum %>;
var i = 1;  
$.timer(5000, function(timer) {     
    $(".prods").hide("slide", { direction: "down" }, 500, function() { 
        $(".prods").html("<div class=\"prod\">" + $("#pr" + ((4*i) % prodNum)).html() + "</div>" + 
                        "<div class=\"prod\">" + $("#pr" + ((4*i + 1) % prodNum)).html() + "</div>" + 
                        "<div class=\"prod\">" + $("#pr" + ((4*i + 2) % prodNum)).html() + "</div>" + 
                        "<div class=\"prod\">" + $("#pr" + ((4*i + 3) % prodNum)).html() + "</div>");
        $(".prods").show("slide", { direction: "down" }, 500);
        i++;
     });


});

It works fine with firefox, but in IE I get "Out of memory at line: 13" How can I fix this? I am using version 1.4.2

Answer 1

Found the problem.

It was a computability between the jQuery and the jQuery.ui versions

Thanks

Answer 2

Inside your method instead of using $(".prods") inside the method, use $(this) , like this:

var prodNum = <%=prodNum %>;
var i = 1;  
$.timer(5000, function(timer) {     
  $(".prods").hide("slide", { direction: "down" }, 500, function() { 
    $(this).html("<div class='prod'>" + $("#pr" + ((4*i) % prodNum)).html() + "</div>" + 
                 "<div class='prod'>" + $("#pr" + ((4*i + 1) % prodNum)).html() + "</div>" + 
                 "<div class='prod'>" + $("#pr" + ((4*i + 2) % prodNum)).html() + "</div>" + 
                 "<div class='prod'>" + $("#pr" + ((4*i + 3) % prodNum)).html() + "</div>")
           .show("slide", { direction: "down" }, 500);
    i++;
  });
});

When you use $(".prods") it's animating each element interdependently (and times n elements, since every .hide() that finished queues every other new .prod element as well, it's exponentially compounding the animations). With all the slide animations within each other and queuing per element, IE won't be too happy with this many animations going at once.