0

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

2 回答 2

0

“如果我将背景图像位置设置为 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();
于 2011-09-07T07:39:11.197 回答
0

您想向 .show() 添加回调并在演出完成后更改背景位置，如下所示

$(this).find("span").stop().fadeTo('normal', 1).show('slow', function() {
    $(this).find("a.thumb").css({'background-position' : '0 0'});
  });
于 2011-09-07T07:42:16.313 回答