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;
}
Best Answer
It's hard to tell from the question, but if you're re-using the same
div, you'll need to resetmarginLeft. E.g.:(Of course, if the starting point shouldn't be
0, use10pxor whatever.) You might also want to throw astopon 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:
JavaScript: