jQuery：animate（）在IE中无法正常工作 [英] JQuery: animate() doesn't work as expected in IE

问题描述

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

为什么下面的功能在IE 7中不能正常工作，但是和Firefox完全一样？是否有动画函数中的错误？

 函数accordion_starting_page（）{
 //隐藏除了第一个
 $（'＃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（parseFloat（$（this）.next（'。FCE-Fade'）。css（height））> 0）{
 return false; 
} 
 
 var toHide = $（this）.siblings（'。FCE-Fade.isVisible'）; 
 
 toHide.removeClass（isVisible）; 
 
 // （{height：0，display：none}，1000）; 
 
 $（this）.next（'。 FCE-Fade'）。addClass（isVisible）。animate（{height：200}，1000）; 
 
 return false; 
}）; 
 
 $ / code $ 
 
 
非常感谢您的帮助... 
 
 
 
 
 
非常感谢，这些都是很棒的提示！不幸的是，它仍然无法正常工作... 
 
 
 
问题是，IE显示两个容器的内容，直到动画结束... Firefox的行为正确.. 。我认为这是溢出：隐藏的东西 - 但这并没有改变任何东西。
 
 
我已经尝试了手风琴插件，但它的表现完全一样... 
解决方案
 
正如保罗所说的，当使用这个方法的时候。 Animate（）jQuery IE7浏览器不能在内部识别属性的位置。例如
 
 
 
 CSS规则： 
 
 
  li p（底部：-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（{ ***位置：绝对e'***，bottom：bottom}，{queue：false，duration：300}）。 
 $ b}）; // 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'）{b ottom ='-432px';} 
 
 $ this.find（'p'）。stop（）。animate（{bottom：bottom}，{queue：false，duration：300}）。find （ '首先'）显示（）; 
 $ b}）; // fim do hover（）
  
它是这样解决的。
 
I'm getting crazy with this IE 7...

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

I already tried the accordion-plugin, but it behaves exactly the same...
解决方案
As stated by Paul, when using the method. Animate () jQuery IE7 browser does not recognize internally the property 'position'. eg

CSS rule:
li p (bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;)
Implementation of animation in 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:
li p (position: absolute; left: 0; bottom:-178px; color: white; background-color: # 4d4d4d; height: 100%; padding: 30px 10px 0 10px;)
JQuery code:
   $('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.

                        
这篇关于jQuery：animate（）在IE中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！