5

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

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

4

8 回答 8

8

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

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

例如，将 div 连续向左移动，

查询：

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 最终会抛出错误。

希望这可以帮助

于 2009-01-29T11:01:26.660 回答
1

正如保罗所说，使用该方法时。Animate() 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()

就我而言，它是通过这种方式解决的。

于 2010-03-31T12:47:09.897 回答
1

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

万岁旧版本！

于 2011-05-30T22:22:11.043 回答
0

我不确定问题到底是什么......也许你不能为 " display: none" 制作动画？试试这个：

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

...想，看起来容器overflow: hidden上没有设置可能还有其他问题。

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

于 2008-12-02T13:50:41.077 回答
0

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

此外，您的动画在功能上似乎与 slideUp(1000) 相同。

于 2008-12-02T13:52:53.897 回答
0

我最近遇到了一个问题，animate() 没有按预期工作，这取决于 IE 渲染我的 css padding: 属性与 FireFox 不同。

这似乎发生在其他人身上，我不得不在我的 css 中破解；而是使用边距和固定宽度以及其他此类可怕的 IE hack。

于 2008-12-02T14:10:08.153 回答
0

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

法郎

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

IE

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

应该修复它。

于 2010-05-13T17:50:50.490 回答
0

这可能是题外话，但我正在玩 JQuery，它很棒，但对 Javascript 很陌生，我没有意识到 IE 7 和 IE 8 不能识别 const 关键字。这就是阻止我的 JQuery 运行的原因，而不是动画问题..希望这可能会帮助一些绝望的灵魂。伙计，我迫不及待地想回到好的 ol AS3 和 Flex..

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

更多

于 2011-01-12T18:42:29.347 回答