我在 UL 中与 css/background-images 并排列出了多个 IMG 图标。
当您将鼠标悬停在单个图标上时,IMG 淡化为 0,然后 css/background-image 变得可见。
我可以让它很好地淡出,但背景图像保持可见并在 IMG 后面显示几个像素(假设主 IMG 为黑色,css/背景图像为橙色)。
如果我将背景图像位置设置为 0 0,那么它会在 IMG 的 fadeTo 完成之前消失。
所以基本上我希望背景位置在“正常,1”完成后改变。
我希望这是有道理的。
有人可以帮忙吗?
这是代码:
$("ul.socials li").hover(function() { //On hover...
var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
//Set a background image(thumbOver) on the <a> tag - Set position to bottom
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat 0 -37px'});
//Animate the image to 0 opacity (fade it out)
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to full opacity
$(this).find("span").stop().fadeTo('normal', 1).show();
$(this).find("a.thumb").css({'background-position' : '0 0'});
});