jquery mouseover animation jumping
- by Sylph
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> <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();
});
