jQuery 淡入淡出上面的图像并更改后面的 CSS 背景图像

Question

我有多个图标 IMG 在带有 css/背景图像的 UL 中并排列出。

当您将鼠标悬停在单个图标上时，IMG 会淡出为 0，然后 css/背景图像将变得可见。

我可以让它很好地淡出，但背景图像保持可见，并在 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 的 fadeTo 完成之前消失。所以基本上我希望背景位置在“正常，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'});
  });