Question

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…

Answer 1

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.