ansaurus

Question

Answer 1

+1 A:

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.

Paddy 2009-11-17 13:28:02

Answer 2

+1 A:

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.

stefita 2009-11-17 13:34:48

I think stefita is right - I just had the same problem (jQuery animations) with an object using css style filter:alpha(opacity=0), and putting quotes around the alpha(opacity=0) part worked for me.

Walt W 2009-12-01 16:54:27

Correction - the double quotes actually just disabled the filter: attribute, which is why it started working on my end. Looks like we're out of luck for animations with a filter?

Walt W 2009-12-01 17:07:55

Answer 3

+2 A:

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'&gt;&lt;/script&gt;
    <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">&nbsp;&nbsp;&nbsp;&nbsp;The Spare Our Green Mission ...</font>
                        <br>
                        <br>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Ambrosia 2009-11-17 13:40:53

Answer 4

A:

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.

Alex Kahn 2009-11-17 13:41:45

ansaurus

tags:

views:

answers:

jquery animation not showing up

related questions