jquery animation not showing up
$('#main-mission .fade').animate({opacity:1.0;filter:alph开发者_StackOverflowa(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,
<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. I'm not quite sure why it isn't, working... could someone please help?
Thanks.
You have used semi-colons where you should have used commas to separate the css attributes being animated. Also you don't need to try and add IE support with filter attribute. Try this code, tested in FF3.5 and 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>
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.
I think that the non numerical values should be in quotes like filter:"alpha(opacity=0)";.
What error message are you getting (from firebug, i.e.)?
-- edit
Btw. IE8 is using -ms-filter for opacity now.
I agree with Paddy. You should write a simpler version of your code and then try it out. Make only one call to $.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. It is not valid HTML.
加载中,请稍侯......
精彩评论