move element left to right over and over jQuery

Question

I'm using this to move a div inside a slide show. The problem is that the captions for each image must move from left to right on each image starting from the same place (each div). Using this piece of code the div moves as desired but the next one will move from the point where the last one was placed.

$("#elementId").animate({
        marginLeft: "-=100"
    }, 1000, function() {
        //Complete
    }
);

Just in case I'm making it hard to explain.

I have a slideshow, each image fades in, a sec later a div with some text show up on top of each image, the div must move from left to right. but using the code above, the div moves, but as soon as the next image fades in the div will move starting from the last position where the previous div was.

How can I make the div "move" again starting from 0 or the original position ?

Edit Code requested:

    <script type="text/javascript">
    // Speed of the automatic slideshow
    var slideshowSpeed = 6000;

    // Variable to store the images we need to set as background
    // which also includes some text and url's.


    var photos = [ {
            "title" : "First Tag line :",
            "image" : "/images/chrysanthemum-266x200.jpg",
            "url" : "http://www.gyms-ireland.com",
            "firstline" : "First Tag line :",
            "secondline" : "Second Tag line"
        }, {
            "title" : "Some text",
            "image" : "/images/tulips-oop-ll-266x200.jpg",
            "url" : "http://www.gyms-ireland.com",
            "firstline" : "Some text",
            "secondline" : "Alternative text"
        }, {
            "title" : "Npthing Here",
            "image" : "/images/koala-266x200.jpg",
            "url" : "http://www.gyms-ireland.com",
            "firstline" : "Npthing Here",
            "secondline" : "Also nothing here",
        }, {
            "title" : "Office Appartments",
            "image" : "/images/work.jpg",
            "url" : "http://www.sxc.hu/photo/1265695",
            "firstline" : "Or still busy at",
            "secondline" : "work?"
        }
    ];

    jQuery(document).ready(function() {

        // Backwards navigation
        jQuery("#back").click(function() {
            stopAnimation();
            navigate("back");
        });

        // Forward navigation
        jQuery("#next").click(function() {
            stopAnimation();
            navigate("next");
        });

        var interval;
        jQuery("#control").toggle(function(){
            stopAnimation();
        }, function() {
            // Change the background image to "pause"
            jQuery(this).css({ "background-image" : "url(images/btn_pause.png)" });

            // Show the next image
            navigate("next");

            // Start playing the animation
            interval = setInterval(function() {
                navigate("next");
            }, slideshowSpeed);
        });


        var activeContainer = 1;    
        var currentImg = 0;
        var animating = false;
        var navigate = function(direction) {
            // Check if no animation is running. If it is, prevent the action
            if(animating) {
                return;
            }

            // Check which current image we need to show
            if(direction == "next") {
                currentImg++;
                if(currentImg == photos.length + 1) {
                    currentImg = 1;
                }
            } else {
                currentImg--;
                if(currentImg == 0) {
                    currentImg = photos.length;
                }
            }

            // Check which container we need to use
            var currentContainer = activeContainer;
            if(activeContainer == 1) {
                activeContainer = 2;
            } else {
                activeContainer = 1;
            }

            showImage(photos[currentImg - 1], currentContainer, activeContainer);

        };

        var currentZindex = -1;
        var showImage = function(photoObject, currentContainer, activeContainer) {
            animating = true;

            // Make sure the new container is always on the background
            currentZindex--;

            // Set the background image of the new active container
            jQuery("#headerimg" + activeContainer).css({
                "background-image" : "url(" + photoObject.image + ")",
                "display" : "block",
                "z-index" : currentZindex
            });

            // Hide the header text
            jQuery("#headertxt").css({"display" : "none"});

            // Set the new header text
            jQuery("#firstline").html(photoObject.firstline);
jQuery("#firstline").css("marginLeft", "0").animate({
        marginLeft: "-=100"
    }, 4000, function() {
        //Complete
    }
);
            jQuery("#secondline")
                .attr("href", photoObject.url)
                .html(photoObject.secondline);
            jQuery("#pictureduri")
                .attr("href", photoObject.url)
                .html(photoObject.title);


            // Fade out the current container
            // and display the header text when animation is complete
            jQuery("#headerimg" + currentContainer).fadeOut(function() {
                setTimeout(function() {
                    jQuery("#headertxt").css({"display" : "block"});
                    animating = false;
                }, 500);
            });
        };

        var stopAnimation = function() {
            // Change the background image to "play"
            jQuery("#control").css({ "background-image" : "url(images/btn_play.png)" });

            // Clear the interval
            clearInterval(interval);
        };

        // We should statically set the first image
        navigate("next");

        // Start playing the animation
        interval = setInterval(function() {
            navigate("next");
        }, slideshowSpeed);

    });</script>

HTML

<div id="headerimgs">
    <div id="headerimg1" class="headerimg"></div>
    <div id="headerimg2" class="headerimg"></div>
</div>

<!-- Slideshow controls -->

<!-- jQuery handles for the text displayed on top of the images -->
<div id="headertxt">
    <p class="caption">
        <span id="firstline"></span>
        <a href="#" id="secondline"></a>
    </p>
    <p class="pictured">
        Pictured:
        <a href="#" id="pictureduri"></a>
    </p>
</div>

CSS

#header {
    height: 220px;
    width: 520px;
}
.headerimg {
    background-position: center top;
    background-repeat: no-repeat;
    height: 220px;
    position: absolute;
    width: 520px;
}

#headertxt {
    clear: both;
    margin: 0 auto;
    position: relative;
    top: 50px;
    width: 520px;
}
#firstline {
    color: #333333;
    display: block;
    float: left;
    font-size: 25px;
    margin: 10px 10px 0 0;
    padding: 10px;
    marginLeft:0px !important;
}
#secondline {
    clear: both;
    color: #CD2B3A;
    display: block;
    float: left;
    font-size: 40px;
    margin: 10px 30px 0;
    padding: 15px 10px;
    text-decoration: none;
}
#headerimgs a {
    text-indent: -999999px;
}

.new {
    display: block;
    height: 220px;
    position: absolute;
    width: 520px;
}
#secondline:hover { text-decoration:underline; color:#7F000C; }

.pictured {
    background-color: #CC3333;
    clear: both;
    color: #FFFFFF;
    display: block;
    float: right;
    font-size: 12px;
    margin-top: 10px;
    padding: 9px 16px;
}

Answer 1

OK, I can see this has been solved, but I'd have used the jQuery Cycle plugin; much more simple. You can see it in action on my website.

Answer 2

It's hard to tell from the question, but if you're re-using the same div, you'll need to reset marginLeft. E.g.:

$("#elementId").css("marginLeft", "0").animate({
        marginLeft: "-=100"
    }, 1000, function() {
        //Complete
    }
);

(Of course, if the starting point shouldn't be 0, use 10px or whatever.) You might also want to throw a stop on there in case you call this before the animation completes, but it depends on what the rest of your code is doing.

Live example | source:

HTML:

<div id="elementId">I'm the div</div>
<button id="theButton">Click me</button>

JavaScript:

jQuery(function($) {

  $("#theButton").click(function() {
    $("#elementId").stop().css("marginLeft", "0").animate({
            marginLeft: "-=100"
        }, 1000, function() {
            //Complete
            display("Done, click the button again to see the repeat");
        }
    );
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});