用setInterval调用的jQuery在第一个时间间隔不是动画
问题描述:
我有两个图像堆叠。使用setInterval(),最上面的一个消失,暴露第二个。然后顶部图像切换到底部的src而不可见,并且再次变得不透明。第二个图像变为下一个图像,并等待setInterval()淡出顶部图像,然后重新执行。用setInterval调用的jQuery在第一个时间间隔不是动画
这一切都很好,除了第一次;没有褪色。我没有看到什么?
这发生在所有的Firefox和Chrome上,我假设所有其他人。
HTML
<script type="text/javascript">
setInterval('swapImage()', 5000);
var galleryCount = 3;
</script>
...
<img id="image" src="images/gallery/01.jpg" />
<img id="imagenext" src="images/gallery/02.jpg" />
的Javascript
function swapImage(imageToFadeID)
{
$("#image").animate
(
{ "opacity": "0" },
"slow",
"linear",
changeImage()
);
};
var i = 1;
function changeImage()
//counter +1
{
i = i + 1;
//add "0" to image number "j" if less than 10.
if (i < 10)
{
var j = "0" + i;
}
else
{
j = i;
}
//change top image to match bottom
var topImage = document.getElementById("imagenext").src;
document.getElementById("image").src = topImage;
//make top image reappear
document.getElementById("image").style.opacity = '1';
//change out bottom image to next
var btmImage = "images/gallery/" + j + ".jpg";
document.getElementById("imagenext").src = btmImage;
//reset counter if at end
if (i > galleryCount - 1)
{
i = 0;
}
}
答
我看起来像你调用changeImage
,而不是把它当作一个回调animate
的:
错误:
function swapImage(imageToFadeID)
{
$("#image").animate
(
{ "opacity": "0" },
"slow",
"linear",
changeImage() // <--- !!! Remove the parentheses from this line!
);
};
右:
function swapImage(imageToFadeID)
{
$("#image").animate
(
{ "opacity": "0" },
"slow",
"linear",
changeImage
);
};
这是它。谢谢!为什么你不能在完整的功能中使用paranthesis?这是否搞乱了语法?如果我需要在那里使用一个变量呢? – RyanJMcGowan 2012-03-13 01:18:39
带圆括号的是一个函数调用 - 调用'changeImage'并且只有它的返回值被传递给动画函数。没有圆括号,它只是函数本身 - 你把它交给animate(),动画被执行,当它完成时,animate()调用你传递的函数。 – Niko 2012-03-13 01:27:06
如果您需要将参数传递给changeImage,请围绕它包装另一个函数:'animate(...,“linar”,function(){changeImage(param1,param2);});' – Niko 2012-03-13 01:27:35