JQuery的：如预期在IE动画（）不工作

StackOverflow https://stackoverflow.com/questions/333911

题

我越来越疯狂与此IE 7 ...

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

为什么以下功能不是在IE 7与Firefox工作，但完全？有在动画功能的一个错误？

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的行为正确...我想这是用的东西“溢出：隐藏” - 但这并没有改变任何东西

我已经尝试过了手风琴，插件，但它的行为完全一样...

有帮助吗？

解决方案

作为使用该方法时由Paul，陈述。动画（）jQuery的IE7浏览器不认识内部的财产“位置”。例如

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

在我的情况下，它是解决这种方式。

其他提示

我碰到一个类似的问题附带animate函数，惊讶，当它被示出从核心jQuery库来的误差。然而jQuery是很好，它的IE浏览器，你需要照顾。

当动画在IE元素的任何属性，你需要确保你的CSS有你要改变属性的起点。这也适用于野生

作为一个例子，移动持续一个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浏览器将无法运行动画东西，一天后，我发现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

万岁旧版本！

您可以利用jQuery选择的：可见，而不是拨动ISVISIBLE类

。

另外动画看起来在功能上相同的效果基本show（1000）。

最近我有一个问题，即动画（）如预期没有工作，这是下降到IE渲染我的CSS填充：性质不同的Firefox的

这似乎发生在其他人，我不得不砍在我的CSS左右;使用利润率和固定宽度和其他这种可怕的IE黑客，代替

这可能是题外话，但我与jQuery和其巨大的玩弄但作为新的JavaScript我不知道，IE 7和IE 8不承认const关键字。那是什么，从没有运行动画..hope的问题，可能会帮助一些绝望的灵魂停止我的JQuery。男人，我不能等到要回好醇AS3和Flex ..

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

更多

变更持续时间IE。让它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});

应该修复它。

我不知道问题到底是什么？也许你不能动画为“display: none”？尝试这样：

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

...思想，它看起来像有可能与overflow: hidden在其上设置不具有容器其他一些问题。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top