Executing Events Sequentially in jQuery

Question

I have a small piece of jquery, where I am hiding then showing a div. After both events are completed, I execute a few lines of code which is like so:

 $(".subFields").hide("slide", { direction: "up" }, 250, function() {           
            $(".subFields").show("slide", { direction: "up" }, 250, function() {                
                container.addClass("formfield");
                container.removeClass("formfieldCurrent");
                fillOpenFields($(this).val());           
            });
        });

Problem is the code in the show event is entereing an infinite loop for some reason, any ideas.

Answer 1

At first glance I cant see the issue. What does fillOpenFields function do?

Answer 2

Your using a class selector which can mean you get multiple elements matched. The hide and show will run for each element found hence this might explain why it seems a infinite loop is occuring.

Do you have multiple elements with that class?

Can you paste the markup and full js.

Also it is better to try and use the node name as part of the selector

e.g $('div.someClass');

otherwise jQuery has to loop the whole dom to test each element against the class rather than using getElementsByTagName

Answer 3

The problem was in the method fillOpenFields, sorry for the inconvinience