Trouble with jQuery's .animate()

Question

I am using .animate() to smoothly reposition a few divs after they've been made visible via .show("slow"). Since the divs may or may not still be doing the animation, I'm also using .queue() to make sure the move takes place after the animation's done.

Problem: .animate() doesn't work. It gets to the right line of code, but doesn't do anything and doesn't generate any errors. Help?

Javascript:

function arrange_sections() {
        var margin = 20;
        var left = margin;
        $(".section.active").queue(function() {
            $(".section.active").each(function() {
                $(this).animate({ "left": left }, "slow");
                left += $(this).width() + margin;
            });
        });
}

CSS:
(I use show("slow") to bring the sections out of display:none)

.section {
    display: none;
    position: absolute;
    top: 5%;
    left: 5%;
    padding: 20px;
    z-index: 20;
}

Answer 1

My best guess: you need a style of "position: relative;" or "position: absolute;" added to your CSS.

I tried to run the code, but saw nothing. However, when I used Firebug's HTML tab to look at the page, I saw most of them had a style="left: 140px" or similar.

Answer 2

+1 to what David said about the positioning. Your sections should probably be positioned absolutely inside a relatively positioned div. Also, I don't think you need the jQuery/Queue method. Try this instead:

$(".section.active").each(function() {
    $(this).show("slow", function() {
    $(this).animate({ "left": left }, "slow");
    left += $(this).width() + margin;
    });                
}); 

This will cause the animate left to be called after the show slow. I don't know how you are processing the show but when I used your same pattern from the animate left in a separate function and then called one after the other, the animate function was not being called at all from inside the second queue function.

Based on what I read in the jQuery docs it looks like all animation functions are automatically added to the built-in fx queue.

Answer 3

Finally found the answer -- All I needed to do was include the dequeue() function at the end of the function I passed to queue().

Thanks for your help, guys!