4

ホバーすると、テキストとハイパーリンクとともに、画像の大きなバージョンの<img>アニメーションとフェードインがあり ます。<div>マウスアウトすると、 が<div>アニメーション化してフェードアウトします。これは正常に機能します。私のホバー機能のみが<img>それ自体にのみ関係します。<div>a) が の上に表示されるか、<img>b) が<img>に到達するためにマウスを離すとすぐに<div>、jQuery はマウスアウトを読み取り、<div>離れた をアニメートします。これを修正できるように jQuery を書き直すにはどうすればよいですか? 前もって感謝します ...

HTML の一部を次に示します。

<img runat="server" src="~/images/pc_blocks_navigation_spec1.gif" class="navigation_spec1" alt="" />
<div class="navigation_spec1_panel">
    <p>filler <a href="#">test</a></p>
</div>

...そしてjQuery ...

$('.navigation_spec1_panel').hide().css('opacity','0.0');
$('.navigation_spec1').hover(function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '337px', 
          height: '234px',
          opacity: 1.0 }, 
        1250 ); 
    }, function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '1px', 
          height: '1px',
          opacity: 0.0 }, 
        1250); 
    });
});

(サイド コメント: 私のアニメーションは、IE 6 または 7 でこのアニメーションの後にコーディングされた<div>他の の上または上に表示されません。代わりに、z-index に関係なく、それらの後ろに表示されます。提案はありますか?)<div><div>

4

4 に答える 4

8

オプション1： imgとdivを別のdiv内に配置し、その外側のdivにイベントを設定します。

オプション2：両方の要素にmouseout-eventでsetTimerを使用し、両方の要素でmouseover-eventにclearTimerを使用します。これにより、フェードアウェイコードをトリガーせずにフォーカスを移動するための短い期間が作成されます。

于 2009-03-16T22:10:18.003 に答える
2

あなたのdivがあなたの画像の上に置かれているということですか？

その場合は、マウスアウト機能を画像ではなく div に割り当てることができます。

$('.navigation_spec1_panel').hide().css('opacity','0.0');

$('.navigation_spec1').mouseover(function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '337px', 
          height: '234px',
          opacity: 1.0 }, 
        1250 ); 
    };
});

$('.navigation_spec1_panel').mouseout(function() { 
    $(this).animate({ 
          width: '1px', 
          height: '1px',
          opacity: 0.0 }, 
        1250); 
    });
});
于 2009-03-16T21:24:50.063 に答える
0

このjQueryメソッドはもう少し複雑ですが、2つの要素にカーソルを合わせるとうまく機能します。この例では、IDが「div1」と「div2」の2つの別個のDIV要素を使用していることを前提としています。この例では、1つの要素が「トリガー」（つまりdiv1）であり、1つの要素が「応答」（つまりdiv2）であると想定しています。ユーザーのマウスをトリガーの上に置くと、応答が表示されます。ユーザーのマウスがトリガーと応答の両方を離れると、応答は非表示になります。トランジションエフェクトとしてjQueryslideUpとslideDownを使用しましたが、どのjQueryトランジションでも代用できます。また、この概念を視覚的に示すために、パディングとボーダースタイルを少し追加しました。

HTML：

<style>
    #div1 { padding: 20px; border: 1px solid #000000; }
    #div2 { padding: 20px; border: 1px solid #ff0000; }
</style>

<div id='div1'>Some Content</div>
<div id='div2'>Some Other Content</div>

javascriptコードは、setTimeout呼び出しを使用して小さな遅延を追加し、マウスが1つのDIVから別のDIVに移行できるようにします。2つのDIVが互いに向かい合って配置されている場合、このタイムアウトは非常に小さい可能性があります。「hover_timeout」の値を変更すると、移行時間の許容値が変更されます。

注：この例では、「mouseenter」と「mouseleave」の使用が重要です。mouseenterとmouseoverの使用の詳細については、次のスタック投稿を参照してください：Jquery mouseenter（）vs mouseover（）

JAVASCRIPT： 

var trigger_element = "#div1";
var response_element = "#div2";
var hover_timeout = 250; // milliseconds

function hideElement(waitTime)
{
    setTimeout(function() 
    {
        if (!$(trigger_element).is(":hover") && !$(response_element).is(":hover"))
        {
            $(response_element).slideUp();
        }
    },waitTime);
}

// trigger mouse enter
$(trigger_element).mouseenter (function() 
{
        $(response_element).slideDown();
});

// trigger mouse leave
$(trigger_element).mouseleave (function() 
{
    hideElement(hover_timeout);
});

// response mouse enter
$(response_element).mouseenter (function() 
{
    // do nothing
});

// response mouse leave
$(response_element).mouseleave (function() 
{
    hideElement(hover_timeout);
});
于 2012-09-13T20:27:40.947 に答える
0

（注：これは私自身にとって受け入れられる答えですが、初期条件が変更されたためです。質問はまだ実行可能だと思います）

<div>内部で を使用しないようにコードを変更しました<a>が、代わり<a>にサイズ変更と背景画像で を使用しました。このように、タグは 1 つしかなく、前のエラーは意味がありません。ただし、IEでこれをまだテストしていません...

于 2009-03-16T21:56:34.807 に答える