下面的代码不能以两种方式工作。它在每次单击后都不会像它应该的那样向左移动(我是否正确声明了位置:相对正确?),并且左动画的延迟为1秒,但是淡入淡出效果应仅设置为100。褪色也需要1000。在此先感谢,这是我的代码:
<html>
<center>
<img src="image1.jpg" id="a1"></img>
<br>
<h1>it worked.</h1>
<br>
<img src="image2.jpg" width="500" height="500" id="a2" style="position:relative"></img>
</center>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var x = .99;
$(document).ready(function () {
$("h1").hide();
$("#a2").click(function () {
if (x > .15) {
x -= .1
$("#a1").animate({
"left": "+=1000px"
}, 1000);
$("#a1").fadeTo(100, x);
} else {
$("h1").show(10);
}
});
});
</script>
最佳答案
“ left” css属性仅适用于非静态定位的元素。因此,请检查此内容-添加相对于第一张图片的样式位置:
<img src="image1.jpg" id="a1" style="position:relative" />
演示:http://jsfiddle.net/57nZp/
关于javascript - jQuery-每次单击将图像向左移动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21964678/