jQuer image hover animate
- by Ryan Max
Hello. I have the following jQuery script that makes an orange transparent hover effect cover the image when it's rolled over. How do I make it so this script will animate in and out (with a fade?)
$(document).ready(function() {
$('#gallery a').bind('mouseover', function(){
$(this).parent('li').css({position:'relative'});
var img = $(this).children('img');
$('<div />').text(' ').css({
'height': img.height(),
'width': img.width(),
'background-color': 'orange',
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': 0.5
}).bind('mouseout', function(){
$(this).remove();
}).insertAfter(this);
});
});
