ある画像を別の画像にフェードアウトする jQuery 実装コード_jquery

jQuery は、ある画像を別の画像にフェードアウトします。たとえば、次の HTML:

コードをコピー コードは次のとおりです。

🎜 >

まず、次のように、div のサイズが画像のサイズと同じであることを確認します。

CSS コード:

コードをコピーします コードは次のとおりです:

.fade

{
background-image:url( 'images/2.jpg');
width:300px;
height:225px;



jQuery コードは次のとおりです。 >

コードをコピー

コードは次のとおりです。 $(document).ready(function () { $(".fade").hover(function ( ) { $(this).find("img").stop(true, true).animate({ opacity: 0 }, 500);

}, function () {

$(this ).find("img").stop(true, true).animate({ opacity: 1 },
}); >});



完全な実装コード:

コードをコピー

コードは次のとおりです。

< ;script type="text/javascript">
$(document).ready(function () {
$(". fade").hover(function () {
$(this).find("img").stop(true, true).animate({ opacity: 0 }, 500);
}, function ( ) {
$(this).find("img").stop (true, true).animate({ opacity: 1 }, 500)
});



作成者 : jQuery 学習

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。