jQuery动画不显示
[英]jquery animation not showing up
问题描述
$('#main-mission .fade').animate({opacity:1.0;filter:alpha(opacity=100);}, { queue:true, duration:2000 }).animate({opacity:1.0;filter:alpha(opacity=100);}, 1500).animate({opacity:0.0;filter:alpha(opacity=0);}, 800,'linear',function(){
$('#main-mission .fade').html("<font size='3'>... to organize and display the data that people need, to give them the ability to make smarter decisions and purchases that will help the environment, as well as reduce their monthly electricity costs.</font>"); }).animate({opacity:1.0;filter:alpha(opacity=100);}, 2000);
...thats my jquery, 
...就是我的jquery，
<div id="main-mission">
<table><tr height="28"><td width="11"></td><td width="475" style="height: 75px;" class="boxed"><div class="fade" style="opacity:0.0;filter:alpha(opacity=0)"><font size="4"> The Spare Our Green Mission ...</font><br><br></div> </td></tr></table>
</div>
and that is the HTML. 那就是HTML。 I'm not quite sure why it isn't, working... could someone please help? 我不太确定为什么不行，工作中……有人可以帮忙吗？
Thanks. 谢谢。
4 个解决方案
解决方案1
2 2009-11-17 13:40:53
You have used semi-colons where you should have used commas to separate the css attributes being animated. 您已使用分号，而应使用逗号分隔正在动画的css属性。 Also you don't need to try and add IE support with filter attribute. 另外，您无需尝试使用filter属性添加IE支持。 Try this code, tested in FF3.5 and IE8 试试这个代码，在FF3.5和IE8中测试
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('#main-mission .fade')
.animate({opacity:1.0}, {queue:true,duration:2000})
.animate({opacity:1.0}, 1500)
.animate({opacity:0.0}, 800,'linear',function()
{
$('#main-mission .fade').html("<font size='3'>... to organize and display the data that people need, to give them the ability to make smarter decisions and purchases that will help the environment, as well as reduce their monthly electricity costs.</font>");
})
.animate({opacity:1.0}, 2000);
});
</script>
</head>
<body>
<div id="main-mission">
<table>
<tr height="28">
<td width="11"></td>
<td width="475" style="height: 75px;" class="boxed">
<div class="fade" style="opacity:0.0;filter:alpha(opacity=0)">
<font size="4"> The Spare Our Green Mission ...</font>
<br>
<br>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
解决方案2
1 2009-11-17 13:28:02
Have you tried removing parts of the chain down to the first element and then adding them back in one at a time to see what is broken? 您是否尝试过将链条的一部分移至第一个元素，然后一次又添加回去以查看损坏的部分？ It's a long function call to try and read and parse. 尝试读取和解析是一个漫长的函数调用。
解决方案3
1 2009-11-17 13:34:48
I think that the non numerical values should be in quotes like filter:"alpha(opacity=0)"; 我认为非数字值应使用像filter:"alpha(opacity=0)";这样的引号filter:"alpha(opacity=0)"; . 。 What error message are you getting (from firebug, ie)? 您收到什么错误消息（例如，从Firebug）？
-- edit -编辑
Btw. 顺便说一句。 IE8 is using -ms-filter for opacity now. IE8现在使用-ms-filter来提高透明度。
解决方案4
0 2009-11-17 13:41:45
I agree with Paddy. 我同意帕迪。 You should write a simpler version of your code and then try it out. 您应该编写一个简单的代码版本，然后尝试一下。 Make only one call to $.animate() . 仅调用$.animate() 。 Once you get that working, then add in the callback. 一旦工作正常，然后添加回调。 Once that works, then add the chaining. 一旦可行，然后添加链接。
Also note that you should not use the <font> tag. 另请注意，您不应使用<font>标记。 It is not valid HTML. 这不是有效的HTML。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.