jquery animate 不会触发
Posted
技术标签:
【中文标题】jquery animate 不会触发【英文标题】：jquery animate doesn't fire 【发布时间】：2010-10-30 16:23:01 【问题描述】：<html>
<head>
<style type="text/css">
div#bg1
height: 159px;
width: 800px;
margin-left: auto;
margin-right: auto;
background-image: url('images/bg1.jpg');
background-repeat: no-repeat;
background-position:center center;
position: relative;
z-index: 3;
div#bg2
height: 159px;
width: 800px;
margin-left: auto;
margin-right: auto;
background-image: url('images/bg2.jpg');
background-repeat: no-repeat;
background-position:center center;
position: relative;
z-index: 2;
margin-top: -159px;
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function Animate_2()
$("div#bg1").animate(opacity: 100, 2000);
$("div#bg2").animate(opacity: 0 , 2000);
setTimeout(Animate_1, 5000);
function Animate_1()
$("div#bg1").animate(opacity: 0 , 2000);
$("div#bg2").animate(opacity: 100, 2000);
setTimeout(Animate_2, 5000);
$(function()
/* Start cycle */
setTimeout(Animate_1, 5000);
);
</script>
</head>
<body>
<div id="bg1"></div>
<div id="bg2"></div>
</body>
</html>
Animate_1() 工作正常，但 Animate_2() 只会显示 bg2.jpg 而不会为不透明度设置动画。这在 IE 和 Firefox 中是一样的。
为什么会这样 >??
【问题讨论】：
【参考方案1】：您真正的问题是不透明度是 0 到 1 的比例，而不是 0 到 100。但这里有一些细微的改进：
您也可以大大简化代码，因为您只需将一张图片放在另一张图片之上。
<script type="text/javascript">
var shown = true;
function toggleFront()
shown = !shown;
$("div#bg1").animate(opacity: shown*1, 200);
window.setTimeout(toggleFront, 1000);
$(function()
/* Start cycle */
window.setTimeout(toggleFront, 500);
);
</script>
我弄乱了你的时间值以更快地显示它。
或者修复它。在 setTimeout 之前您需要window.。简单的修复。
<script type="text/javascript">
function Animate_2()
$("div#bg1").animate(opacity: 1, 2000);
$("div#bg2").animate(opacity: 0 , 2000);
window.setTimeout(Animate_1, 5000);
function Animate_1()
$("div#bg1").animate(opacity: 0 , 2000);
$("div#bg2").animate(opacity: 1, 2000);
window.setTimeout(Animate_2, 5000);
$(function()
/* Start cycle */
window.setTimeout(Animate_1, 5000);
);
</script>
【讨论】：
完全一样的结果..第一次动画很好，第二次它不会动画，只是快速改变图像。 我明白你的意思。不透明度是 0 到 1 的比例，而不是 0 到 100。它正在为它设置动画，但它在 1 1/100 的过程中完全不透明。我已经修复了我的两个代码示例。【参考方案2】：我无法获得您在 Firefox 3.0.10 Ubuntu 上描述的相同结果，Animate_2 似乎工作正常。起初我认为这可能是因为您可能使用本地文件而不是通过 localhost 服务器（如 apache）运行您的页面，但这并没有改变我的结果，但我记得在 Windows 平台上工作的问题在过去。我还使用以下预加载脚本进行了尝试，这似乎确实消除了我机器上的初始动画卡顿：
【讨论】：
以上是关于jquery animate 不会触发的主要内容，如果未能解决你的问题，请参考以下文章