在jQuery上左右移动元素 [英] move element left to right over and over jQuery
问题描述
我正在使用它在幻灯片放映中移动div.问题在于，每个图像的标题必须从同一位置(每个div)开始在每个图像上从左向右移动. 使用此代码，div可以按需要移动，但是下一个将从放置最后一个的位置开始移动.
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
}
);
以防万一我很难解释.
我有一个幻灯片放映，每个图像都淡入，几秒钟后，一个div并在每个图像上方显示一些文本，该div必须从左向右移动.但是使用上面的代码，div会移动，但是一旦下一个图像在div中消失，就会从上一个div所在的最后一个位置开始移动.
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.
如何使div从0或原始位置再次移动"?
How can I make the div "move" again starting from 0 or the original position ?
修改 请求的代码:
<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;
}
推荐答案
这个问题很难分辨，但是如果您重复使用相同的div，则需要重置marginLeft.例如:
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
}
);
(当然，如果起始点不应该是0，请使用10px或其他方法.)您可能还想在该位置上放置一个stop，以防在动画完成之前调用它，但是这取决于您其余的代码在做什么.
(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.
HTML:
<div id="elementId">I'm the div</div>
<button id="theButton">Click me</button>
JavaScript:
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);
}
});
这篇关于在jQuery上左右移动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
