jquery mouseover animation jumping

Question

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

Answer 1

Give .mouseenter and .mouseleave a shot.

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

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

Explanation:

.mouseover() will fire every time you move the cursor over the element, whereas .mouseenter only fires once, you guessed correctly, when the cursor is entering the target element.

Answer 2

have you tried using mouseenter() and mouseleave, might help.

Also you could test how many times your mouse over is being called by adding alert('mouse over called'); or console.log