JQuery: animate() doesn't work as expected in IE
Solution 1
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.
Solution 2
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
Solution 3
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!
Related videos on Youtube
swalkner
Updated on August 25, 2020Comments
-
swalkner over 3 years
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...
-
leppie over 15 yearsso what do you get and what do you expect?
-
swalkner over 15 yearsI 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...
-
-
Erik Töyrä Silfverswärd over 12 yearsI have noticed the same thing. Tried to upgrade to jQuery 1.7.1 and it's the same problem there.