fade effect for background image sprite
Hello,
I need to do fade in and fade out effect for html element , I styled the element to use background image and changing the position will display the active image
CSS:
#header h1{
display:block;
float: left;
height: 123px;
width: 310px;
background:url(../images/logo.jpg) no-repeat 0 0;
text-indent: -10000px;
}
#header h1 a{
display:block;
width:100%;
height:100%;
}
#header h1 a:hover {
background:url(../images/logo.jpg) no-repeat 0 -123px;
}
JS:
$(document).ready(function() {
//$('#header h1 a:hover').css('background','none');
// Bind a mouseenter event to #header > h1 > a element
$('#header h1 a')
.bind('mouseenter',function(){
$('#header h1 a').css('background','url(./images/logo.jpg) no-repeat 0 -123px').hide().fadeIn();
})
.bind('mouseleave',function(){
$(this).fadeOut('normal')
});
});
the effect work only one time the next time I move mouse over the logo picture nothing occur , please advise
thanks