JQuery slideToggle jump on close

Question

I am trying to slide in a table using jQuery and it works in FF, OP, CHrome. Only IE (6,7,8) gives me problems. It glides perfectly up and down, but after the slideshow animation is over. Hidden pops up to its full height and then closes.

Therefore, I assume that it should be somewhere in between when it switches from a minimum height to "display: none", which appears for a short second.

The code is built dynamically, but I will 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 issues here are when slideToggle only omitted problems with padding, margins, or animation problems, but it all works.

Help is appreciated.

thanks Spanky

Answer 1

I have found a solution.

It seems that only the jquery.slideUp () function is causing the problem when setting the height back to 0px. It seems that the error appears when the browser is running in QuirksMode (HTML Transitional 4.01 DocType) and in IE. The solution I found here is a replacement for .slideUp (). Therefore, 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(); }); 

thanks to Siderite Zackwehdex wo also reported a jQuery error ( http://dev.jquery.com/ticket/5062 ), but they will not be fixed. They said:

you can just make sure that your document is not in quirksmode mode (specify the correct document type) - this is what we usually recommend when this problem occurs.

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

Here you will find an explanation and a function that works like a charm. The only change I had to make was setting the height to 1px, so it won’t open when .slideToggle () is first run if the elements are hidden from the start.

So my working solution is as follows:

 // 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(); } }); } } 

Answer 2

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

You can also solve your problem in IE with improved scaling .