Image resize animation
Image resize animation
I was trying to create an effect similar to how the images on this
page expand when you hover:
http://demos.dojotoolkit.org/demos/
-
<script type="text/javascript">
$(document).ready(function(){
var img_width=$("#aboutus").attr("width");
var img_height=$("#aboutus").attr("height");
$('#aboutus').hover(
function() {
$(this).animate({ width: img_width + 50 + "px", height: img_height
+ 50 + "px", top: "-25px", left: "-25px" }, 'fast');
},
function() {
$(this).animate({ width: img_width + "px", height: img_height +
"px", top: "0px", left: "0px" }, 'fast');
}
);
});
</script>
However, if i move the mouse in and out of the image several times
really fast, the image will "throb" because it catches each event and
can't show them fast enough. It's like a delay of animation. The dojo doesn't seem to
have the same symptoms. Is there a good way to avoid this?
Thanks,
Brandon