上面的 jQuery Fade 图片和后面的 CSS background-image

Question

我在 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'});
});

Answer 1

“如果我将背景图像位置设置为 0 0，那么它会在 IMG 的淡入淡出完成之前消失。所以基本上我希望背景位置在“正常，1”完成后改变。 "

在fadeTo回调上改变你的背景位置：

//Fade the image to full opacity
var $li = $(this);
$(this).find("span").stop().fadeTo('normal', 1, function() { 
   $li.find("a.thumb").css({'background-position' : '0 0'});
}).show();

或

//Fade the image to full opacity
var $li = $(this);
$(this).find("span").stop().fadeTo('normal', 1, function() { 
   $(this).parent().find("a.thumb").css({'background-position' : '0 0'});
}).show();

Answer 2

你想给 .show() 添加一个回调并在演出结束后改变背景位置

$(this).find("span").stop().fadeTo('normal', 1).show('slow', function() {
    $(this).find("a.thumb").css({'background-position' : '0 0'});
  });