0

これが初心者の質問である場合は申し訳ありませんが、これらの mouseenter/mouseleave イベントを組み合わせる方法はありますか?

$('.home').mouseenter(function(){
        $('#display_home:hidden').fadeIn(400); 
     }).mouseleave(function(){
         $('#display_home').hide()
     }); 

     $('.about').mouseenter(function(){
         $('#display_about:hidden').fadeIn(400);
     }).mouseleave(function(){
         $('#display_about').hide();
     });

     $('.contact').mouseenter(function(){
         $('#display_contact:hidden').fadeIn(400);
     }).mouseleave(function(){
         $('#display_contact').hide();
     });

     $('.services').mouseenter(function(){
         $('#display_services:hidden').fadeIn(400);
     }).mouseleave(function(){ 
         $('#display_services').hide();
     });

私はさまざまなプログラマーによってさまざまな方法を試しました。関数によって各divにリンクされたliクラスにマウスを合わせて、複数のdivを個別に非表示/表示しようとしていmouseenterますが、jQueryが初めてで、解決策が見つからないようです。これを行うためのよりクリーンな方法が必要であることはわかっていますが、まだ見つけていません。どんな助けでも大歓迎です！

例

ありがとう

html:

<div id="right_nav">
    <div id='display_home'><img src="images/gallery/home.png" width="605" height="300" /></div>
    <div id='display_about'><img src="images/gallery/about us.png" width="605" height="300" /></div>
    <div id='display_contact'><img src="images/gallery/Contact Us.png" width="605" height="300" /></div>
    <div id='display_services'><img src="images/gallery/Services.png" width="605" height="300" /></div> 
  </div>
<div id="thumb">
      <ul>
        <li class="home"><img src="images/gallery/thumb/home.png" width="82" height="23" /></li>
        <li class="about"><img src="images/gallery/thumb/about us.png" width="130" height="24" /></li>
        <li class="contact"><img src="images/gallery/thumb/Contact Us.png" width="150" height="23" /></li>
        <li class="services"><img src="images/gallery/thumb/Services.png" width="113" height="24" /></li>
      </ul>
    </div>
4

3 に答える 3

3 
 $('.home, .about, .contact, ,services').hover(function(){
    $('#display_'+$(this).attr('class')+':hidden').fadeIn(400); 
 }, function() {
     $('#display_'+$(this).attr('class')).hide()
 });

編集

おそらく、クラス名の代わりに data 属性を使用する方が良いでしょう:

  <ul>
    <li class="home" data-name="home"><img src="images/gallery/thumb/home.png" width="82" height="23" /></li>
    <li class="about" data-name="about"><img src="images/gallery/thumb/about us.png" width="130" height="24" /></li>
    <li class="contact" data-name="contact"><img src="images/gallery/thumb/Contact Us.png" width="150" height="23" /></li>
    <li class="services" data-name="services"><img src="images/gallery/thumb/Services.png" width="113" height="24" /></li>
  </ul>

 $('#thumb li').hover(function(){
    $('#display_'+$(this).data('name')+':hidden').fadeIn(400); 
 }, function() {
     $('#display_'+$(this).data('name')).stop().hide();
 });

このようにして、クラスを壊すことなくクラスを変更したり、クラスを追加したりできます。

于 2011-06-24T09:29:11.293 に答える
1 
$('div#thumb li').hover(function(){ // mouseover
    var className = $(this).attr('class');
    var divToShow = $('div#display_'+className);
    divToShow.fadeIn(400);
},
function(){ // mouseout
    // just hide all divs
    $('div#right_nav div').stop().hide();
});

したがって、ここでは、lis のクラス名が非表示/表示する div の ID に直接関連していると仮定しました。

したがって、最初の関数 (mouseover) は、マウスオーバーした li のクラス名を取得し、それをプレフィックスdiv#display_に追加して、表示する div の ID を作成し、その要素をフェードインします。

mouseout 関数は、すべての div を非表示にします。はstop()、フェード インの途中でアニメーションを停止します。

お役に立てれば。

于 2011-06-24T09:27:49.680 に答える
1 
$('#thumb ul li').mouseenter(function(){
        $('#right_nav div').eq($(this).index()).fadeIn(400); 
     }).mouseleave(function(){
         $('#right_nav div').hide()
     });

これは、スクリプトに戻って編集する必要がなく、コンテンツが同じ順序であると仮定した場合の最も単純なバージョンです。

于 2011-06-24T09:28:38.157 に答える