0

主なアイデアは、私のページでdivをアニメーション化する効果を得ることです。まず、主な手がかり:

<ul class="institucional-menu">
            <li class="insmenu" id="Historia">Historia Fundacional</li>
            <li class="insmenu" id="Autoridades">Autoridades</li>
            <li class="insmenu" id="Balance">Balance</li>
        </ul>

ポインターがメニュー オプションの上にある場合、右側の div が移動し、各オプションに応じて画像が表示されます。これは、次にユーザーが別のオプションにマウスを移動するまで表示されます。最初のアクション (いくつかのオプションに対する最初のユーザーの移動) は問題ありません。前の IMG が存在するため、問題は 2 番目以降のアクションから始まります。そのため、div を右に移動する必要があります (それが消える効果を作成します)。別の img を取得し、新しい img を内部にチャージして右から左に戻します。

これが私のJavascriptです：

jQuery('.insmenu').mouseover(function(){
        jQuery('#imgcontainer').animate({
            left: '1024px',
            opacity: '1'
        });
        jQuery('#imgcontainer').queue(function(){
            jQuery('#imgcontainer').attr("src", e.id+'.jpg');
            jQuery('#imgcontainer').animate({
            left: '0px',
            opacity: '1'
        });
        });
    });

私は一日中、最初にダイビングを遠ざけ、次に画像を充電し、最後にそのdivを返そうとしていました。でもできなかった。推奨事項はありますか？

どうもありがとうございました！

PD: 「e.id」は、「ホバー」された要素の値になろうとします (言い方がわかりません。この動詞が存在する場合)。たとえば、id="Historia"、画像は同じ名前です。それぞれのID値のように

  • それが私がコントロールを失っている理由です、私はその値を渡そうとしていました...

    • 4

    2 に答える 2

    0

    マウスオーバーの代わりに、ユーザーのクリックにも同じ効果をもたらしました。私が正しく理解していれば、同じ考えです。

    私がしなければならなかったことは、コンテナ div (ここでは #imgcontainer) 内の各 (ここでは mouseover-able li) メニューに独自の div を与えることでした。例えば：

     <ul class="institucional-menu">
        <li class="insmenu" id="Historia">Historia Fundacional</li>
        <li class="insmenu" id="Autoridades">Autoridades</li>
        <li class="insmenu" id="Balance">Balance</li>
 </ul>
 <div id="imgcontainer">
    <div id="divHistoria><img src="..." /></div>
    <div id="divAuthoridades><img src="..." /></div>
    <div id="divBalance><img src="..." /></div>
 </div>

    次に、メニュー項目と同じ名前の div を非表示/表示/アニメーション化するのは簡単なことです。src のスワッピングは必要ありません (ただし、非常に大きな画像がたくさんある場合、これは問題になる可能性があります)。

    于 2012-04-24T18:08:30.790 に答える
    0

    これのことですか？

    $(document).ready(function(){
  $('.insmenu').mouseover(function(){
        var e = $(this);
        $('#imgcontainer').animate({
            left: '1024px',
            opacity: '1'
        },function(){
              $('#imgcontainer').attr("src",  e.attr('image'));
              console.log(e.attr('image'));
              $('#imgcontainer').animate({
                   left: '0px',
                   opacity: '1'
             });            
        });

    });
});

    左のアニメーションを可能にするために、アイテムを静的にすることはできません (絶対位置、相対位置、または固定位置に変更してください)。

    http://jsfiddle.net/KLrVg/22/

    于 2012-04-24T18:12:11.730 に答える