JQuery:animate()在IE中没有按预期工作

Question

我对这个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表现正常......我认为这是"溢出:隐藏"的事情 - 但这并没有改变任何东西.

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

Answer 1

我遇到了类似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 2

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

我的情况是这样解决的。