jQuery slideToggle jump on close

Question

Hi,

I'm trying to slideToggle a in a table with jQuery and it works in FF, OP, CHrome. Only IE (6,7,8) is giving me problems. It slides down perfectly down and up, but after the slide up animation is finished. The hidden pops up in full height and then closes.

So I guess it must be somwhere inbetween when it switches from a minimal height to "display:none" that it appears for a short second.

The code is built dynamically but I'll try to give an example:

<table>
<tr>
    <td>
        <script type="text/javascript">
            function toggleTr_{$dynamicID}() {
                $('#content_{$dynamicID}').slideToggle('slow');
                /* DO SOME OTHER STOFF LIKE COLOR CHANGES CSS CLASS CHANGES */
            }
        </script>
    </td>
</tr>
<tr id="list_{$dynamicID}" onclick="toggleTr_{$dynamicID}();" style="cursor:pointer;">
    <td> <!-- INFO HEADER --> </td>
</tr>
<tr>
    <td>
        <div id="content_{$dynamicID}" style="display:none;">
         <!-- INFO BODY HIDDEN --> 
        </div
    </td>
</tr>

Other problems here with slideToggle only descibed problems with padding, margin, or problems with the animation, but that all works.

Help is appreciated.

Thx, Spanky

Answer 1

Check out this question/answer and this answer (on how to use the callback function).

You might also solve your problem in IE with the zoom fix.

Answer 2

I found a solution.

It seems that only jquery's .slideUp() function is causing the problem when setting the height back to 0px. The bug only seems to appear when the browser is working in QuirksMode (HTML Transitional 4.01 DocType) and on IE. The solution I found here is a replacement for .slideUp(). So instead of

targetElement.slideUp(speed,callBack)

you write

var h = target.height();
var cssHeight=target.css('height');
target.animate({ 
    height: '1px' }, speed, function() { 
    target.hide();
    target.height(h);
    target.css('height',cssHeight);
    callBack(); 
});

Thx to Siderite Zackwehdex wo also reported the bug to jQuery (http://dev.jquery.com/ticket/5062), but they won't fix it. They said:

you can just made sure that your document isn't in quirksmode (provide a proper doctype) - which is what we typically recommend when encountering this issue.

I also found a fix, or replacement for .slideToggle() for everyone who doesn't have the time or control over the HTML to fix it and make it "QuirksMode Clean".

Here you'll find an explanation and function that works like a charm. The only change I had to make, was setting the height to '1px' so it won't jump open on the first run of .slideToggle() if elements are hidden from the beginning on.

So my working solution finally looks like this:

// this is a fix for the jQuery slide effects
  function slideToggle(el, bShow){
    var $el = $(el), height = $el.data("originalHeight"), visible = $el.is(":visible");

    // if the bShow isn't present, get the current visibility and reverse it
    if( arguments.length == 1 ) bShow = !visible;

    // if the current visiblilty is the same as the requested state, cancel
    if( bShow == visible ) return false;

    // get the original height
    if( !height ){
      // get original height
      height = $el.show().height();
      // update the height
      $el.data("originalHeight", height);
      // if the element was hidden, hide it again
      if( !visible ) $el.css({height: '1px'}).hide();
    }

    // expand the knowledge (instead of slideDown/Up, use custom animation which applies fix)
    if( bShow ){
      $el.show().animate({height: height}, {duration: 500});
    } else {
      $el.animate({height: '1px'}, {duration: 500, complete:function (){
          $el.hide();
        }
      });
    }
  }