JQuery Animate не срабатывает - PullRequest
Новая
       21

JQuery Animate не срабатывает

1 голос
/ 02 июня 2009 
<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.

Почему это> ??

Ответы [ 2 ]

1 голос
/ 02 июня 2009

Ваша настоящая проблема в том, что непрозрачность - это шкала от 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>

Я испортил ваши значения времени, чтобы показать их быстрее.

Или исправь. Вам нужно window. перед setTimeout. Простое исправление. 

    <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 голосов
/ 02 июня 2009

Я не смог получить те же результаты, которые вы описываете в Firefox 3.0.10 Ubuntu, Animate_2, кажется, работает нормально. Сначала я подумал, что это может быть из-за того, что вы можете использовать локальный файл вместо запуска своей страницы через сервер localhost (например, apache), но это не изменило результаты для меня, но я помню проблемы с этим при работе на платформе Windows в прошлом. Я также попытался сделать это с помощью следующего сценария предварительной загрузки, и это, похоже, удаляет первоначальную анимацию заикания на моей машине: 

jQuery.preloadImages = function()
                {
                  for(var i = 0; i").attr("src", arguments[i]);
                    }
                }
$.preloadImages("imgages/bg1.jpg", "imgages/bg2.jpg");
...