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

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

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

И мы хотим изменить непрозрачность <span> с помощью анимации при наведении на ссылку.

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


animation jquery opacity hover
person Happy    schedule 24.01.2010    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Как это:

$('a:has(span)').hover(
    function() { $('span', this).fadeIn(); },
    function() { $('span', this).fadeOut(); }
);
person SLaks    schedule 24.01.2010

arrow_upward
46
arrow_downward

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

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

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

РЕДАКТИРОВАТЬ

Это намного лучше:

$('a:has(span)').hover(function() { 
    $('span', this).stop().animate({"opacity": 1}); 
},function() { 
    $('span', this).stop().animate({"opacity": 0}); 
});
person Raspo    schedule 24.01.2010
comment
Ваш селектор неправильный - он хочет, чтобы эффект появлялся при наведении на ссылку, а не на спан. Тем не менее, у вас есть хороший момент. - person SLaks; 24.01.2010

arrow_upward
3
arrow_downward

Используйте .fadeTo():

$( 'a' ).hover(
    function() { $( this ).fadeTo( 'fast', '1'); },
    function() { $( this ).fadeTo( 'fast', '.4'); }
);

Демонстрация: см. скрипку.

person Nabil Kadimi    schedule 13.10.2014
comment
Ваша изначальная логика все же передана. +1 - person Mr. Polywhirl; 17.10.2015