JQuery：animate（）在IE中没有按预期工作

我对这款IE 7感到疯狂……

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

为什么以下function在IE 7中不起作用，但与Firefox完全兼容？ 动画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; }); } 

非常感谢您的帮助…

---

非常感谢，这些都是很好的提示！ 不幸的是，它仍然不起作用……

问题是IE显示两个容器的内容，直到动画结束…… Firefox表现正常……我认为这是“溢出：隐藏”的事情 – 但这并没有改变任何东西。

我已经尝试过手风琴插件，但它的表现完全一样……

Answer 1

如保罗所述，使用该方法时。 Animate（）jQuery IE7浏览器无法在内部识别属性“position”。 例如

CSS规则：

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

在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() 

什么在所有浏览器中工作：

CSS规则：

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

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({bottom:bottom}, {queue:false, duration:300}).find('.first').show(); });//fim do hover() 

就我而言，这是以这种方式解决的。

Answer 2

我遇到了类似animate函数的问题，当它显示来自核心jQuery库的错误时感到很惊讶。 但是jQuery很好，它需要你的IE。

在IE中为元素的任何属性设置动画时，您需要确保在CSS中有一个要更改的属性的起点。 这也适用于Safari。

举个例子，将div连续向左移动，

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; } 

如果你没有放入左上角和顶部起始位置，IE最终会抛出一个错误。

希望这可以帮助

Answer 3

经过一天的想知道为什么IE不会动画的东西我发现有些版本的JQuery不再做他们曾经做过的事情：

这个：

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

不适用于此Jquery： https ： //ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

但它可以使用： https ： //ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

万岁旧版本！

Answer 4

您可以使用jQuery选择器：可见而不是切换isVisible类。

此外，您的动画在function上与slideUp（1000）相同。

Answer 5

我最近遇到了一个问题，其中animate（）没有按预期工作，而是由IE渲染我的css填充：属性与FireFox不同。

这似乎发生在其他人身上，我不得不在我的CSS中乱砍; 使用边距和固定宽度和其他如此可怕的IE黑客，而不是。

Answer 6

这可能是偏离主题，但我正在玩JQuery和它的伟大但新的Javascript我没有意识到IE 7和IE 8不识别const关键字。 这是什么阻止我的JQuery运行不是动画的问题..希望可能有助于一些绝望的灵魂。 男人，我等不及要回到好的AS3和Flex ..

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

更多

Answer 7

更改IE的持续时间。 使它成为你在FF中的1/10，它应该接近两个浏览器中的相同行为：

FF

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

IE

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

应该解决它。

Answer 8

我不确定问题到底是什么……也许你不能动画“ display: none ”？ 试试这个：

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

…想想，看起来容器可能还有其他一些问题没有overflow: hidden设置就可以了。

最好的方法可能是避免重新发明轮子：jQuery UI插件有一个内置的手风琴。 http://docs.jquery.com/UI/Accordion我相信尊敬的Resig＆Co先生已经处理过你可能遇到的任何错误。