Question

我在带有css / background-images的UL中并排列出了多个图标IMG。

当您将鼠标悬停在单个图标上时，IMG会淡化为0，然后css / background-image变为可见。

我可以让它恢复正常，但背景图像保持可见并显示IMG后面的几个像素（假设主IMG是黑色，css /背景图像是橙色）。

如果我将背景图像位置设置为0 0，那么它会在IMG的fadeTo完成之前消失。

所以基本上我希望在“normal，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结束之前消失。所以基本上我希望一旦”normal，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'});
  });

jQuery淡化上面的图像并改变后面的CSS背景图像

2 个答案: