1

インデックス ページに 10 個の画像を表示しようとしています。各画像をマウスオーバーするとテキストの段落にフェードインし、マウス アウトすると元の画像にフェードバックします。

各画像は 10 枚 (ポートフォリオ) とは異なり、テキストの内容も異なります。

私は完全に jQuery n00b であり、以下は現在の HTML ページです。

これまでのところ、単一の画像を別の画像にフェードさせる方法を理解しましたが、インデックス ページに 10 個の画像を異なる時間 (たとえば、画像がマウスオーバーされたとき) にフェードさせる簡単な方法を見つけることができませんでした。画像を別の画像ではなくテキストに変更する方法を見つけましたか...助けてください。

提案やコードは大歓迎です..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
img {
    display:block;
    position:absolute;
    top: 0;
    left: 0;
 }
</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script TYPE="text/javascript">

$(function() {
    $('#imgs')
    .mouseenter(function() {
        $('#i2').fadeOut('slow');
    })
    .mouseleave(function() {
        $('#i2').fadeIn('slow');
    });  
});

</script>

</head>
<body>


<div id="imgs">
    <img src="/images/unlimited.jpg" id="i1">  <!-- this is the mouseover image -->
    <img src="/images/optimize.jpg" id="i2">  <!-- this is the default image -->
</div>


</body>
</html>
4

0 に答える 0