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

StackOverflow https://stackoverflow.com/questions/939485

  •  06-09-2019
  •  | 
  •  

Вопрос 

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

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

Это было полезно?

Решение

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

Другие советы

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

jQuery.preloadImages = function()
                {
                  for(var i = 0; i").attr("src", arguments[i]);
                    }
                }
$.preloadImages("imgages/bg1.jpg", "imgages/bg2.jpg");
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top