JQuery: animate() doesn't work as expected in IE

Question

I'm getting crazy with this IE 7...

==> hhttp://neu.emergent-innovation.com/

Why does following function not work in IE 7, but perfectly with Firefox? Is there a bug in the animate-function?

function accordion_starting_page(){
    // hide all elements except the first one
    $('#FCE-Inhalt02-ContentWrapper .FCE-Fade:not(:first)').css("height", "0").hide();
    $('#FCE-Inhalt02-ContentWrapper .FCE-Fade:first').addClass("isVisible");

    $('div.FCE-Title').click(function(){

        // if user clicks on an already opened element => do nothing
        if (parseFloat($(this).next('.FCE-Fade').css("height")) > 0) {
            return false;
        }

        var toHide = $(this).siblings('.FCE-Fade.isVisible');

        toHide.removeClass("isVisible");

        // close all opened siblings
        toHide.animate({"height": "0", "display": "none"}, 1000);

        $(this).next('.FCE-Fade').addClass("isVisible").animate({"height" : "200"}, 1000);

        return false;
    });
}

Thank you very much for your help...

Thank you very much, those were great hints! Unfortunately, it still doesn't work...

The problem is that IE shows the content of both containers until the animation is over... Firefox behaves correctly... I thought it's the thing with "overflow: hidden" - but that didn't change anything.

I already tried the accordion-plugin, but it behaves exactly the same...

I expect that it behaves as Firefox: that the containers' contents are covered and revealed during animation. IE7 immediately shows the "new" content and shows the "old" content until animation is finished... — swalkner, Dec 02 '08 at 14:04

score 8 · Answer 1 · edited Aug 16 '12 at 12:20

I came across a similar problem with the animate function and was surprised when it was showing the error coming from the core jQuery library. However jQuery is fine, its IE you need to cater for.

When animating any attribute of an element in IE, you need to make sure that in your CSS there is a starting point for the attribute you are going to alter. This also applies to Safari.

As an example, moving a div continually to the left,

JQuery:

var re = /px/;
var currentLeft = $("#mydiv").css('left').replace(re,'') - 0;
$("#mydiv").css('left',(currentLeft-20)+'px');

CSS:

#mydiv { position: absolute;    top: 0;    left: 0; }

If you DO NOT put in a left & top starting position IE will eventually throw an error.

Hope this helps

score 1 · Accepted Answer · edited Aug 24 '12 at 18:54

As stated by Paul, when using the method. Animate () jQuery IE7 browser does not recognize internally the property 'position'. eg

CSS rule:

li p (bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;)

Implementation of animation in jQuery:

$('li').hover(function(){

              $this = $(this);

              var bottom = '-45px'; //valor default para subir.

              if( $this.css('height') == '320px' ){bottom = '-115px';}

              $this.css('cursor', 'pointer').find('p').stop().find('.first').hide().end().animate({bottom: bottom}, {queue:false, duration:300});

      }, function(){

         var $this = $(this);

         var bottom = '-178px'; //valor default para descer

            if( $this.css('height') == '320px' ){bottom = '-432px';}

         $this.find('p').stop().animate({***position: 'absolute'***, bottom:bottom}, {queue:false, duration:300}).find('.first').show();

      });//fim do hover()

What to work in all browsers:

CSS rule:

li p (position: absolute; left: 0; bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;)

JQuery code:

   $('li').hover(function(){

                 $this = $(this);

         var bottom = '-45px'; //valor default para subir.

              if( $this.css('height') == '320px' ){bottom = '-115px';}

              $this.css('cursor', 'pointer').find('p').stop().find('.first').hide().end().animate({bottom: bottom}, {queue:false, duration:300});

      }, function(){

         var $this = $(this);

         var bottom = '-178px'; //valor default para descer

            if( $this.css('height') == '320px' ){bottom = '-432px';}

         $this.find('p').stop().animate({bottom:bottom}, {queue:false, duration:300}).find('.first').show();

      });//fim do hover()

In my case it was resolved this way.

score 1 · Answer 3 · edited May 31 '11 at 15:01

1

After a day of wondering WHY IE won't animate stuff I found that some versions of JQuery no longer do the thing that they used to:

This:

$('#bs1').animate({
    "left": bs1x
}, 300, function() {
    // Animation complete.
});

will NOT work with this Jquery: https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

but it DOES work with: https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

hooray old versions!

edited May 31 '11 at 15:01

DarthJDG

16,511
11
49
56

answered May 30 '11 at 22:22

Mladen

11
1

I have noticed the same thing. Tried to upgrade to [jQuery 1.7.1](https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js) and it's the same problem there. – Erik Töyrä Silfverswärd Dec 19 '11 at 11:59

score 0 · Answer 4 · edited Jan 20 '12 at 08:55

0

Change your duration for IE. Make it 1/10th what you would in FF, and it should be close to the same behavior in both browsers:

FF

$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 200});

IE

$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 20});

Should fix it.

edited Jan 20 '12 at 08:55

stealthyninja

10,343
11
51
59

answered May 13 '10 at 17:50

John K

1

score 0 · Answer 5 · edited Aug 16 '12 at 12:18

I'm not sure what the problem is exactly... perhaps you can't animate to "display: none" ? Try this:

toHide.animate({ height : 0 }, 1000, function() { $(this).hide(); });

...thought, it looks like there might be some other issues with the container not having overflow: hidden set on it.

The best way might be to avoid re-inventing the wheel: the jQuery UI plugin has an accordion built-in. http://docs.jquery.com/UI/Accordion I'm sure the honourable Mr Resig & Co have already dealt with whatever bugs you might be encountering.

score 0 · Answer 6 · answered Dec 02 '08 at 13:52

0

You could make use of the jQuery selector :visible rather than toggling the isVisible class.

Also your animation seems functionally the same as slideUp(1000).

answered Dec 02 '08 at 13:52

Simon

37,815
2
34
27

score 0 · Answer 7 · answered Dec 02 '08 at 14:10

I had a problem recently where animate() wasn't working as expected and it was down to IE rendering my css padding: properties differently to FireFox.

This seemed to have happened to other people, and I had to hack around in my css; using margins and fixed widths and other such horrible IE hacks, instead.

score 0 · Answer 8 · answered Jan 12 '11 at 18:42

This might be off topic but I am playing around with JQuery and its great but being new to Javascript I didnt realise that IE 7 and IE 8 don't recognise the const keyword . Thats what was stopping my JQuery from running not a problem with animation ..hope that might help some desparate soul. man I can't wait to get back to good ol AS3 and Flex..

see http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/JSConstKeyword.html

for more

JQuery: animate() doesn't work as expected in IE

8 Answers8

Linked