Анимационная непрозрачность на парении (jQuery)

У нас есть ссылка:

<a href="#">
    Some text
    <span style="width: 50px; height: 50px; background: url(image.png); overflow: hidden; opacity: 0;"></span>
</a>

И мы хотим изменить непрозрачность <span> с некоторой анимацией, когда ссылка колеблется.

Как мы сделали бы это?

10
задан Happy 24 January 2010 в 15:04
поделиться

2 ответа

Как это:

$('a:has(span)').hover(
    function() { $('span', this).fadeIn(); },
    function() { $('span', this).fadeOut(); }
);
9
ответ дан 3 December 2019 в 13:17
поделиться

Другое возможное решение:

$("a span").hover(function(){
    $(this).stop().animate({"opacity": 1});
},function(){
    $(this).stop().animate({"opacity": 0});
});

Если вы используете fadeOut(), пролет обвалится, таким образом не

EDIT

Это гораздо лучше:

$('a:has(span)').hover(function() { 
    $('span', this).stop().animate({"opacity": 1}); 
},function() { 
    $('span', this).stop().animate({"opacity": 0}); 
});
46
ответ дан 3 December 2019 в 13:17
поделиться
Другие вопросы по тегам:

Похожие вопросы: