Show/Hide Div in Table in IE

Show/Hide Div in Table in IE

I don't know if I'm the only person who ever has this issue, but it is getting on my nerves...and I've finally found a solution, though would appreciate input on a simpler one. Note that these issues are specific to IE8, and I am using for the purpose of creating a program which works in IE, FF, Chrome, so I've only tested my solutions in those 3. I wasn't sure whether to start this as a question (as I am asking for an easier solution) or if I note it as a problem or discussion.

Any time I've used .show(x) where x > 0 on anything inside of a table, I get this "flicker", which has been mysterious to me for a while. As I need the row to expand it's height when the object grows, so I can't use "position: absolute;", which I found as a suggestion elsewhere (and does work...if the space is already allocated).

There are 2 issues which go along with this "flicker" for what I'm currently working on, which I have shown my fixes below. I would greatly appreciate a simpler solution though.

Issue #1: Width Animation from show causes massive height dysfunction/flicker.
Solution: replace .show() with .animate(), and only animate the height. This is rather simple, but took me a while to figure it out since it was my first time using animate.

  1. $(#id).animate({
  2.   "height": "show"
  3.   , "opacity": "show"
  4. }, 300);

Issue #2: When hiding and showing a div in the same TD at the same time, a small "flicker" will occur of the newly shown div moving into place improperly.
Solution: hide the div being shown, then show the new div, AND rehide previous div if need be, the later 2 being done in a setTimeout.  Rehiding is pretty specific to the example below. If you don't hide it again, and you spam through a long list from the select quick enough, the previous descriptions will not go away properly.

My example involves having a select list, which for each item a description is shown in the TD next to it. Once the selection changes, the old description goes away and a new one appears.

  1. <td>
  2.   <select onchange="showDesc(this.value);">
  3.     <option val=""></option>
  4.     <option val="1">Item 1</option>
  5.     <option val="2">Item 2</option>
  6.   </select>
  7. </td>
  8. <td>
  9.   <div id="desc1" class="desc">description of 1</div>
  10.   <div id="desc2" class="desc">description of 2</div>
  11. </td>

  13. function showDesc(a){
  14.   $(".desc").not("#desc"+a).animate({
  15.     "height": "hide"
  16.     , "opacity": "hide"
  17.   }, 300);
  18.   setTimeout(function(){
  19.     $("#desc"+a).animate({
  20.       "height": "show"
  21.       , "opacity": "show"
  22.     }), 300);
  23.     $(".desc").not("#desc"+a).animate({
  24.       "height": "hide"
  25.       , "opacity": "hide"
  26.     }, 300);
  27.   }, 310);
  28. }

I hope this helps anyone who is having the IE "flicker" issue, and I hope even more that someone out there can give an easier solution!