Javascript/JQuery .animate() 不工作
Posted
技术标签:
【中文标题】Javascript/JQuery .animate() 不工作【英文标题】：Javascript/JQuery .animate() not working 【发布时间】：2013-12-08 15:36:20 【问题描述】：我正在尝试创建一个滑动图片库，每个间隔它们都会滑动，第一张图片会淡出，新图片会淡入。淡入和淡出工作正常，我的图片设置为“位置” : absolute'，但它们不会滑动。我设置了一个 jsfiddle，这样你就可以看到发生了什么：
http://jsfiddle.net/9awwF/
html 代码：
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div style="position: relative; left: 0px; top: 0px;">
<p id="discoImg1a"><a href="includes/images/discoImg1.png">
<img src="http://edubuzz.org/lawprimaryp6/files/2011/11/250px-Disco_ball41.jpg" style="position: absolute; top: 0px; left: 0px; z-index: 1"/></a></p>
<p id="discoImg2a"><a href="includes/images/discoImg2.png">
<img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" style="position: absolute; top: 0px; left: 250px; z-index: 1"/></a></p>
<p id="discoImg3a"><a href="includes/images/discoImg3.png">
<img src="http://fivestaralaska.com/wp-content/uploads/2012/04/disco1.jpeg" style="position: absolute; top: 0px; left: 500px; z-index: 1"/></a></p>
<p id="discoImg4a"><a href="includes/images/discoImg4.png">
<img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" style="position: absolute; top: 0px; left: 750px; z-index: 1"/></a></p>
<p id="discoImg5a"><a href="includes/images/discoImg5.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/disco.jpg" style="position: absolute; top: 0px; left: 1000px; z-index: 1"/></a></p>
<p id="discoImg6a"><a href="includes/images/discoImg6.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/party.jpg" style="position: absolute; top: 0px; left: 1250px; z-index: 1"/></a></p>
<p id="discoImg7a"><a href="includes/images/discoImg7.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/karaoke.gif" style="position: absolute; top: 0px; left: 1500px; z-index: 1"/></a></p>
<p id="discoImg8a"><a href="includes/images/discoImg8.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/discolights.jpg" style="position: absolute; top: 0px; left: 1750px; z-index: 1"/></a></p>
<p id="discoImg9a"><a href="includes/images/discoImg9.png">
<img src="http://www.armagh.co.uk/wp-content/uploads/2013/09/Trad-Disco.jpg" style="position: absolute; top: 0px; left: 2000px; z-index: 1"/></a></p>
</div>
</body>
脚本：
$(document).ready(function ()
$("#discoImg6a").hide();
$("#discoImg7a").hide();
$("#discoImg8a").hide();
$("#discoImg9a").hide();
var currentFirstSlide = 1;
var maxSlides = 9;
function updateSlides()
// Fade out the first image shown
$("#discoImg" + currentFirstSlide + "a").fadeOut(3000);
// Go through every image and move them to the left by 250px
for (var x = 1; x < 10; x++)
var left = $("#discoImg" + x + "a").position().left;
$("#discoImg" + x + "a").animate( left: left - 250 + 'px' );
// Calculate which slide the new one will be and fade it in
var newSlide = currentFirstSlide + 5;
if (newSlide > maxSlides) newSlide = 1;
$("#discoImg" + newSlide + "a").fadeIn(3000);
// Increment the current first slide ready for the next update
currentFirstSlide++;
if (currentFirstSlide > maxSlides) currentFirstSlide = 1;
// Move the slides every 3.5s
setInterval(function () updateSlides() , 3500);
);
提前感谢您的帮助！
【问题讨论】：
【参考方案1】：您正在为p 元素的left 属性设置动画，但它有一个默认的静态position，所以这不会做任何事情。您应该在img 元素上为left 设置动画，或者为p 元素提供绝对或相对定位。
【讨论】：
【参考方案2】：问题是p 元素有id，而不是img
<p><a href="includes/images/discoImg1.png">
<img id="discoImg1a" src="..." style="position: absolute; ..."/></a></p>
【讨论】：
【参考方案3】：没有绝对位置或固定位置的left属性无效。
【讨论】：
【参考方案4】：在你的css 上尝试给absolute 定位一个left: 0px; 可能会自动滑动，别忘了给它一个relative 容器。
【讨论】：
以上是关于Javascript/JQuery .animate() 不工作的主要内容，如果未能解决你的问题，请参考以下文章
javascript/jQuery - 啥是 jQuery.fx？