0

css/background-images を使用して、複数のアイコン IMG を UL に並べてリストしています。

1 つのアイコンにカーソルを合わせると、IMG が 0 になり、css/background-image が表示されます。

正常にフェードバックすることはできますが、背景画像は表示されたままで、IMG の後ろに数ピクセル表示されます (メインの IMG が黒で、css/背景画像がオレンジ色であるとします)。

background-image の位置を 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 の 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();
于 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 に答える