我有以下 jQuery 脚本,它使橙色透明的悬停效果在鼠标滑过时覆盖图像。我该怎么做才能让这个脚本动画进出(淡入淡出?)
$(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);
});
});
最佳答案
尝试..
$(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).fadeOut(function(){ $(this).remove(); }); // <--- added fadeout()
}).insertAfter(this).fadein(); // <--- added fadeIn()
});
});
关于jquery - 图像悬停动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3042977/