jQuery Fade изображение выше и изменить CSS background-image позади - PullRequest
Новая
       17

jQuery Fade изображение выше и изменить CSS background-image позади

0 голосов
/ 07 сентября 2011

У меня есть несколько значков IMG, перечисленных рядом в UL с css / background-images.

Когда вы наводите курсор мыши на один значок, IMG исчезает до 0, а затем css / background-image становится видимым.

Я могу заставить его постепенно исчезать, но фоновое изображение остается видимым и показывает несколько пикселей позади IMG (скажем, основное IMG черное, а css / background-image оранжевое).

Если я установлю положение фонового изображения на 0 0, то оно исчезнет до того, как закончится fadeTo IMG.

Так что в основном я хочу, чтобы положение фона изменилось, как только "нормальное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'});
});

Ответы [ 2 ]

0 голосов
/ 07 сентября 2011

вы хотите добавить функцию обратного вызова в .show () и изменить положение фона после завершения шоу, как это 

$(this).find("span").stop().fadeTo('normal', 1).show('slow', function() {
    $(this).find("a.thumb").css({'background-position' : '0 0'});
  });
0 голосов
/ 07 сентября 2011

"Если я установлю положение фонового изображения на 0 0, то оно исчезнет до того, как закончится fadeTo 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();
...