web-dev-qa-db-ja.com

ホバー時に不透明度をアニメーション化する（jQuery）

リンクがあります：

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

また、リンクにカーソルを合わせたときに、アニメーションで<span>の不透明度を変更したいと思います。

どうすればいいですか？

jqueryanimationhoveropacity
10
Happy

このような：

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

別の可能な解決策：

$("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}); 
});
46
Raspo

。fadeTo（） を使用します：

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

デモ： フィドル を参照

3
Nabil Kadimi