Hi all,

I have a table which is looped in <li>. On mouseover each row, there will be a border shown, and the row id="resFunc" will be displayed. However, in IE, the animation jumps up and down.

Anyone has similar experience or solution to solve this? Thanks in advance!

<div id="resDetails" align="left">
          <table width="400px" class="resBox">
            <tr>
              <td><b>{creator}</b></td>          
            </tr>
            <tr>
              <td colspan="2"><div class="edit{_id}" id="{_id}"> {title}</div></td>
            </tr>
            <tr style="display:none" class="url{_id}">
               <td colspan="2" class="edit_url{_id}" id="{_id}">{url}</td>
           </tr>
            <tr>
              <td colspan="2" class="edit_area{_id}" id="{_id}">{description}</td>
            </tr>
            <tr id="resFunc{_id}" style="display:none">
              <td colspan="2" align="right"><b><a href="#" id="{_id}" class="editRes">Edit</a>&nbsp;&nbsp; <a href="#" class="deleteResource" id="{_id}">Delete</a></b>
               </td>
             </tr>
          </table><br>
        </div>

This is the onClick function :-

$(".resBox").mouseover(function(){ 
var id = $(this).attr("id"); 
$(this).addClass('highlight');  
$('#resFunc'+id).show();
}); 

$(".resBox").mouseout(function(){
var id = $(this).attr("id");
$(this).removeClass('highlight');
$('#resFunc'+id).hide();
});