JQuery: animate()在IE中不能正常工作

I'm getting crazy with this 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中却能完美工作?动画函数中有bug吗?

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...

我已经尝试过accordion-plugin，但是它的表现完全一样……

8 个解决方案

#1

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

正如Paul所说，当使用这个方法的时候。Animate () jQuery IE7浏览器不能在内部识别属性“position”。如

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:

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

In my case it was resolved this way.

我的问题是这样解决的。

#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.

我遇到了与dynamic函数类似的问题，当它显示来自核心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:

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

希望这有助于

#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:

经过一天的思考，为什么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!

万岁旧版本!

#4

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)是一样的。

#5

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填充:属性与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技巧。

#6

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运行的原因，而不是动画的问题。希望这能帮助一些精神失调的人。伙计，我等不及要回到好的状态了。

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

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

for more

更多的

#7

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

即

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

Should fix it.

应该解决它。

#8

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.

最好的方法可能是避免重新发明*:jQuery UI插件有一个内置的手风琴。我确信，尊敬的Resig先生已经处理了您可能遇到的任何问题。