JQuery анимация не отображается - PullRequest
Новая
       31

JQuery анимация не отображается

0 голосов
/ 17 ноября 2009 
$('#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);

... это мой вопрос, 

<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>

и это HTML. Я не совсем уверен, почему это не работает ... кто-то может помочь?

Спасибо.

Ответы [ 4 ]

2 голосов
/ 17 ноября 2009

Вы использовали точки с запятой, где вы должны были использовать запятые для разделения анимируемых атрибутов CSS. Также вам не нужно пытаться добавить поддержку IE с атрибутом фильтра. Попробуйте этот код, протестированный в 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">&nbsp;&nbsp;&nbsp;&nbsp;The Spare Our Green Mission ...</font>
                        <br>
                        <br>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
1 голос
/ 17 ноября 2009

Я думаю, что нечисловые значения должны быть в кавычках, как filter:"alpha(opacity=0)";. Какое сообщение об ошибке вы получаете (от firebug, т.е.)?

- редактировать

Btw. IE8 теперь использует -ms-filter для непрозрачности.

1 голос
/ 17 ноября 2009

Вы пытались удалить части цепи до первого элемента, а затем добавить их обратно по одному, чтобы увидеть, что сломано? Это длинный вызов функции для чтения и анализа.

0 голосов
/ 17 ноября 2009

Я согласен с Пэдди. Вы должны написать более простую версию своего кода, а затем попробовать его. Сделайте только один звонок на $.animate(). Как только вы это заработаете, добавьте обратный вызов. Как только это сработает, добавьте цепочку.

Также обратите внимание, что вы не должны использовать тег <font>. Это не правильный HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...