Облажалась анимация jQuery / JS (Firefox / IE) - PullRequest
Новая
       14

Облажалась анимация jQuery / JS (Firefox / IE)

0 голосов
/ 02 июня 2009

редактирование:

Проблема, похоже, не ограничивается IE, см. Мой пост с ответом ниже для теста.

Здравствуйте, я вращаюсь между 3 различными фоновыми изображениями на логотипе: 

$(function() {

    function Animate_2() {

        $("div#bg1" ).animate({opacity: 0 }, 2000);
        $("div#bg2").animate({opacity: 100}, 2000);

        setTimeout(Animate_3, 5000);

    }

    function Animate_3() {

        $("div#bg2").animate({opacity: 0  }, 2000);
        $("div#bg3").animate({opacity: 100}, 2000);

        setTimeout(Animate_1, 5000);

    }

    function Animate_1() {

        $("div#bg3").animate({opacity: 0  }, 2000);
        $("div#bg1").animate({opacity: 100}, 2000);

        setTimeout(Animate_2, 5000);

    }

    /* Start it */
    setTimeout(Animate_2, 5000);

});

от bg1 до bg3 имеют следующие стили: 

div#bg1 {
    height:             159px;
    width:              800px;
    margin-left:        auto;
    margin-right:       auto;
    background-image:   url('images/bg_1.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/bg_2.jpg');
    background-repeat:  no-repeat;
    background-position:center center;
    position:           relative;
    z-index:            2;
    margin-top:         -159px;
}

div#bg3 {
    height:             159px;
    width:              800px;
    margin-left:        auto;
    margin-right:       auto;
    background-image:   url('images/bg_3.jpg');
    background-repeat:  no-repeat;
    background-position:center center;
    position:           relative;
    z-index:            1;
    margin-top:         -159px;
}

IE отлично справляется с первой анимацией, bg1 красиво исчезает, а bg2 постепенно ... После этого первого идеального перехода он облажается в IE (все версии!), А в Firefox, Chrome, Safari он прекрасно работает. и опера.

В IE изображение меняется, но оно не исчезает должным образом / * ... 1013 *

При запуске через IETester у меня постоянно появляется курсор песочных часов, как будто он загружает фоновое изображение на лету ...

Может кто-нибудь помочь мне с этим?

Ответы [ 2 ]

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

Вы можете попробовать что-то вроде этого: `

        $(function()
        {setTimeout(dostuff, 1000);});
         function dostuff(){
  $("div#bg1").animate({opacity: 100}, 1000).animate({opacity: 100}, 1000).animate({opacity: 0}, 1000).animate({opacity: 0}, 1000).animate({opacity: 100}, 1000);
  $("div#bg2").animate({opacity: 0}, 1000).animate({opacity: 0}, 1000).animate({opacity: 100}, 1000).animate({opacity:100}, 1000).animate({opacity: 0}, 1000);dostuff()}

`

Одной из особенностей jquery является то, что вы можете связывать вещи. Я думаю, что делать это так сложно, чтобы легче было следовать и отлаживать.

0 голосов
/ 02 июня 2009

Мне удалось создать такое поведение в Firefox со следующим кодом: 

<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_2 () ...

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

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

...