0

Web ページに、各リスト項目が画像で表されるメニューを作成したいと考えています。これらの画像のいくつかをマウスでポイントすると、この画像はフェードアウトし、別の画像に置き換えられます (fadeIn() が役立つと思います)。

HTML コード:

<ul id="buttons">`    
    <li><a href="#" onmouseover="change(1)" onmouseout="ret(1)">  
        <img src="button01.png" id="button01_1" />
        <img src="button01_hover.png" id="button01_2"/>  
    </a></li>
    <li><a href="#" onmouseover="change(2)" onmouseout="ret(2)">  
        <img src="button02.png" id="button02_1" />
        <img src="button02_hover.png" id="button02_2"/>  
     </a></li>
</ul>

jQuery - jQuery の使用は初めてで、これを試しましたが、多くの間違いがあります。画像が正しく変化しない - 「fadeIn」画像の位置が変わり (すべてのリスト項目が完全に配置されます)、最初の画像が消えて常に表示されます。コードは次のとおりです。

function change(i)
{
    switch(i)
    {
        case 1:
            $("#button01_1").fadeOut(500); 
            $("#button01_2").fadeIn(500); 
            break;
        case 2:
            $("#button02_1").fadeOut(500);
            $("#button02_2").fadeIn(500);
    }
}

(ret(i) も同様です..)

手伝ってくれてありがとう..

4

3 に答える 3

1

あなたはもうすぐそこにいますが、簡単にすることができます：

<ul id="buttons">
    <li>
        <a href="#" id="link1">
            <img src="button01.png" id="button01_1" />
        </a>
    </li>
    <li>
        <a href="#" id="link2">
            <img src="button02.png" id="button02_1" />
        </a>
    </li>
</ul>

jQuery コード:

$('#link1').hover(function(){
    $('#button01_1').fadeOut(500).attr('src','button01_hover.png').fadeIn(500);
},function(){
    $('#button01_1').fadeOut(500).attr('src','button01.png').fadeIn(500);
});

セレクターを使用すると、id button01_1 を削除し、jQuery セレクターを置き換えることができます$('img','#link')。javascript よりも jQuery ライブラリを使いすぎていたら申し訳ありません。

機能の説明:

$('#link1').hover(function(){ -- ホバー時の最初の関数 -- },function(){ -- ホバーから出る -- });

編集 ：

jQuery ライブラリ :<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

ライブラリを HTML ページに追加する

于 2012-11-24T21:29:24.770 に答える
0

問題は、画像をフェードアウトするとマウスアウトもトリガーされ(display:noneフェードアウトが完了すると)、次にフェードインがトリガーされるという事実だと思います。ロジックを再考することを検討してください。

于 2012-11-24T21:23:38.010 に答える
0

更新：次
のように使用します： 

<ul id="buttons">    
    <li><a href="#" onmouseover="change($(this),1)" onmouseout="ret($(this),1)">  
        <img src="button01.png"/> 
    </a></li>
    <li><a href="#" onmouseover="change($(this),2)" onmouseout="ret($(this),2)">  
        <img src="button02.png"/> 
     </a></li>
</ul>

jquery: 

function change(elem ,i){
   $(elem).find('img').fadeOut('500',function(){
      $(this).attr('src','button0'+i+'_hover.png').fadeIn('2000');
   });
}
function ret(elem ,i){
   $(elem).find('img').fadeOut('500',function(){
       $(this).attr('src','button0'+i+'.png').fadeIn('2000');
   });
}

私はそれがうまくいくことを願っています...

于 2012-11-24T21:26:51.850 に答える