JQuery：animate() 在 IE 中无法按预期工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/333911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: animate() doesn't work as expected in IE
提问by swalkner
I'm getting crazy with this IE 7...
我对这个 IE 7 很着迷...
==> hhttp://neu.emergent-innovation.com/
==> 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?
为什么以下功能在 IE 7 中不起作用，但与 Firefox 完美配合？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.
问题是 IE 显示两个容器的内容，直到动画结束...... Firefox 的行为正确......我认为这是“溢出：隐藏”的事情 - 但这并没有改变任何东西。
I already tried the accordion-plugin, but it behaves exactly the same...
我已经尝试过手风琴插件，但它的行为完全相同......
采纳答案by Tadeu Luis
As stated by Paul, when using the method. Animate () jQuery IE7 browser does not recognize internally the property 'position'. eg
正如保罗所说，在使用该方法时。Animate () jQuery IE7 浏览器无法在内部识别属性“位置”。例如
CSS rule:
CSS规则：
li p (bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;)
Implementation of animation in jQuery:
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:
CSS规则：
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.
在我的情况下，它是通过这种方式解决的。
回答by
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.
我在 animate 函数中遇到了类似的问题，当它显示来自核心 jQuery 库的错误时，我感到很惊讶。然而 jQuery 很好，它的 IE 你需要迎合。
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.
在 IE 中为元素的任何属性设置动画时，您需要确保在您的 CSS 中有您要更改的属性的起点。这也适用于 Safari。
As an example, moving a div continually to the left,
例如，将 div 不断向左移动，
JQuery:
查询：
var re = /px/;
var currentLeft = $("#mydiv").css('left').replace(re,'') - 0;
$("#mydiv").css('left',(currentLeft-20)+'px');
CSS:
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.
如果你不把起始位置放在左上角，IE 最终会抛出一个错误。
Hope this helps
希望这可以帮助
回答by Mladen
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:
经过一天的想知道为什么 IE 不会为内容设置动画后，我发现某些版本的 JQuery 不再做他们曾经做过的事情：
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
不适用于此 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
但它确实适用于：https: //ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
hooray old versions!
万岁老版本！
回答by John K
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:
更改 IE 的持续时间。使其成为您在 FF 中的 1/10，并且在两种浏览器中应该接近相同的行为：
FF
FF
$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 200});
IE
IE
$("#map").animate({"top": (pageY - 101) + "px"},{"easing" : "linear", "duration" : 20});
Should fix it.
应该修复它。
回答by dave
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..
这可能是题外话，但我正在玩 JQuery 和它的伟大，但我不熟悉 Javascript 我没有意识到 IE 7 和 IE 8 不识别 const 关键字。这就是阻止我的 JQuery 运行的原因不是动画问题..希望这可能会帮助一些绝望的灵魂。伙计，我迫不及待地想回到好的 ol AS3 和 Flex..
see http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/JSConstKeyword.html
见 http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/JSConstKeyword.html
for more
更多
回答by nickf
I'm not sure what the problem is exactly... perhaps you can't animate to "display: none" ? Try this:
我不确定问题到底是什么......也许你不能为 " display: none"设置动画？尝试这个：
toHide.animate({ height : 0 }, 1000, function() { $(this).hide(); });
...thought, it looks like there might be some other issues with the container not having overflow: hiddenset on it.
...想，看起来容器没有overflow: hidden设置它可能还有其他一些问题。
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/AccordionI'm sure the honourable Mr Resig & Co have already dealt with whatever bugs you might be encountering.
最好的方法可能是避免重新发明轮子：jQuery UI 插件内置了一个手风琴。http://docs.jquery.com/UI/Accordion我相信尊敬的 Resig & Co 先生已经处理了您可能遇到的任何错误。
回答by Simon
You could make use of the jQuery selector :visible rather than toggling the isVisible class.
您可以使用 jQuery 选择器 :visible 而不是切换 isVisible 类。
Also your animation seems functionally the same as slideUp(1000).
此外，您的动画在功能上与 slideUp(1000) 相同。
回答by adam
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.
我最近遇到了一个问题，animate() 没有按预期工作，这归结于 IE 呈现我的 css padding: 与 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.
这似乎发生在其他人身上，我不得不在我的 css 中进行修改；相反，使用边距和固定宽度以及其他此类可怕的 IE 黑客。
