Question

I’m working on a gallery for the picbox.us site and I’m getting lag when I hover over an image. It’s supposed to just animate the height of my image info to 40 and that’s it. But sometimes it lags, or delays. Here is the page: http://zachrip.net/widgets/gallery/

Here is the only code pertaining to the issue:

JQuery:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".image").hover(
function () {
$("#" + this.id + "info").animate({height: '40'}, 700);
}
);
$(body).hover(
function(){
    $(".imageinfo").animate({height: '0'}, 700);
}
);
$("#container").hover(
function(){
    $(".imageinfo").animate({height: '0'}, 700);
}
);
});
</script>

Html:

<div id='container'>
<center>
<p>Beta testing image gallery</p>
<table cellpadding="1" cellspacing="5">
<tr>
<td><center><img class="image" id="1" src="img1.png"/></center><p id="1info" class="imageinfo">Uploaded by muny</p></td>
<td><center><img class="image" id="2" src="img1.png"/></center><p id="2info" class="imageinfo">Uploaded by zachrip</p></td>
<td><center><img class="image" id="3" src="img1.png"/></center><p id="3info"  class="imageinfo">Uploaded by seanrice</p></td>
</tr>
<tr>
</table>
</center>
</div>

Answer 1

I would suggest something like this:

http://jsbin.com/uzucuh/1/edit

$('.imgBox').on('mouseenter mouseleave',function( ev ){  
  var mEnt = ev.type=='mouseenter'; 
  $('span', this).stop().animate({bottom: mEnt? 40 : 0 }, 300);  
});