0

4 つの imagediv (imgdiv1、imgdiv2、imgdiv3、imgdiv4) と 4 つの contentdiv (condiv1 condiv2 condiv3、condiv4) と 1 つのメイン コンテンツ div (maincon) があるとします。すべての contentdiv (メイン コンテンツ div を除く) は「非表示」または非表示のままにする必要があります。 . imagediv にマウスオーバーすると、各コンがフェードイン効果で表示されます。すべての contentdiv は同じ場所にありますが、imagediv は一種のメニューです。

例: マウスを imgdiv1 の上に移動すると、condiv1 がスムーズにフェードインして表示されます。マウスが imgdiv1 の外に出ると、condiv1 はフェードアウト効果で非表示にフェードアウトする必要があります。imgdiv2、imgdiv3、および imgdiv4 についても同様です。maincon div は常にそこにあり、condiv は imagediv のマウスオーバーでトリガーされたときに maincon の上に移動する必要があります。

jQueryを使用してこれを達成するにはどうすればよいですか? 最善の方法は何ですか？

4

3 に答える 3

0

ホバーを見たことがありますか？マウス イン/マウス アウト イベント ハンドラーを組み合わせて、記述する必要のあるコードを最小限に抑えます。

于 2009-12-14T20:25:25.997 に答える
0

ホバー機能を使用できます
$('#imgdiv1').hover(function(){ /*fade in code*/},function(){/*fade out code*/});

または、JqueryUI を調べて、タブ ウィジェットを使用することもできます。

于 2009-12-14T20:27:36.663 に答える
0

hover() を使用して、2 つの関数を切り替えます。1 つは mouseenter で、もう 1 つはマウスで imgdiv を離れます。実用性のために、imgdiv に追加のクラス「imgdiv」を指定します。これにより、ビヘイビアーを一度作成し、each(); を介してすべての imgdiv 要素にアタッチできます。ループ。

また、すべての contentdiv 要素にクラス "contentdiv" を与えて、1 回の呼び出しでそれらを非表示にできるようにします。

$(document).ready(function(){
   // hide all that should be hidden
   $('div.contentdiv').hide();
    var divToShow= '';
    var strlength = 10;
    $('div.imgdiv').each(function(){
            $(this).hover(function(){
                //find which contentdiv to show
                var thisId= $(this).attr('id');
                strlength = thisId.length;
                divToShow = 'condiv'+thisId.charAt(strlength-1);
                $(divtoShow).stop().fadeIn('slow');
                }
               ,
                function(){
                 // when mouse leaves imgdiv...
                 $(divtoShow).stop().fadeOut('slow');
               }
            );
      });

});
于 2009-12-14T20:30:21.400 に答える