tags:

views:

757

answers:

3
Q: 

jQuery / JS animation screwed up (Firefox/IE)

edit:

Problem seems not to be limited to IE, see my answer post below for a testcase.

Hello, I am rotating between 3 different background images on a logo:

$(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 to bg3 have the following styles:

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 does it just fine for the first animation, bg1 nicely fades out while bg2 fades in... After that first perfect transition it screws up in IE (all versions!) while it works just fine in Firefox, Chrome, Safari and Opera.

In IE the image does change, but it does not properly fade out / in...

When running it through IETester, I continuously get the hour glass cursor as if it is downloading the background image on the fly...

Can anyone help me with this?

A: 

the problem is in IE, animation not working , try use in function fade_in fade_out

Haim Evgi  2009-06-02 07:20:07
fadeIn() and fadeOut() actually map to animate() with opacity, so it's basically the same operation
Philippe Leybaert  2009-06-02 07:25:57
A: 

I have now managed to produce this behavior on Firefox, with the following code:

<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"&gt;&lt;/script&gt;
     <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>

All is fine and dandy at first animate, but it just changes the image (without animation!) at animate_2() ...

 2009-06-02 12:45:43
BG1: http://i44.tinypic.com/2yvwhoy.jpgBG2: http://i42.tinypic.com/s5zcrc.jpg
 2009-06-02 12:46:44
A: 

You might want to try something like this: `

     $(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()}

`

One of the things about jquery is that you can chain stuff. Doing it like this is lest complicated and easier to follow and debug I think.

matpol  2009-06-02 13:20:39

related questions

Make Browser Window Blink in Task Bar
Large File Download
Browser's Default CSS
Disable browser 'Save Password' functionality
What's the simplest way to decremement a date in Javascript by 1 day?
Browser scrollbar
Limitations of screen readers.
Version detection with Silverlight
Best way to fix CSS/JS drop-down problem in IE7 when page includes Google Map
Recommendations for browser add-on tools to help with development
Hyperlinks displaced on IE7
Building Standalone Applications in JavaScript
HTML differences between browsers
Browser Sync accross many machines
Getting selected text in a browser, cross-platform.
How to get PNG transparency working in browsers that don't natively support it?
Best WYSIWYG CSS editor?
Javascript events
Preferred way to use favicons?
IE6: To support or not to support.
Getting the text from a drop-down box
Other browsers
Drag and Drop to a hosted Browser control
How can I tell if a web client is blocking ads?
How can I determine a web user's time zone?