ここにフェードイン/フェードアウトのjQueryの例があります: http://jsfiddle.net/mcgarriers/NJe63/6/
ただし、背景色の赤い効果を背景画像に置き換えることは可能でしょうか?
ご指摘ありがとうございます
ここにフェードイン/フェードアウトのjQueryの例があります: http://jsfiddle.net/mcgarriers/NJe63/6/
ただし、背景色の赤い効果を背景画像に置き換えることは可能でしょうか?
ご指摘ありがとうございます
これはCSS3で行うことができます。画像の周囲に選択したサイズのdivタグを作成してから、基本的なCSS3トランジションを使用できます。
#yourdiv a {
background-color: #FFF;
}
#yourdiv a:hover {
background-color: #000;
-webkit-transition: background-color 600ms linear;
-moz-transition: background-color 600ms linear;
-o-transition: background-color 600ms linear;
-ms-transition: background-color 600ms linear;
transition: background-color 600ms linear;
}
または、CSS3を使用して画像を別の画像にフェードインさせることもできます:http:
//css3.bradshawenterprises.com/cfimg1/
このようなことを試してみてはどうでしょうか。
あなたの jsfiddle リンクからコードを変更しました。
$('.box').mouseenter(function(){
$(this).stop().animate({opacity: 0}, 0).css('background', 'url(http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg)').animate({ opacity: 1 }, 1000);
}).mouseleave(function(){
$(this).stop().animate({opacity: 1}, 0).css('background', 'white');
});
HTML 要素の background-image をフェードイン/フェードアウトすることはできませんが、background-color では可能です。
それはおそらくあなたの解決策でしょうか?jQueryで背景画像をフェードインおよびフェードアウトしますか?