0

この問題に関する他の質問と回答を読みましたが、うまくいきませんでした。何かが欠けているか、私の例が少し異なっている可能性があります。わかりません。とにかく、テキストとリンクを含む div があり、ユーザーがこの最初の div にカーソルを合わせたときに新しい div を作成したいと思います。問題は、最初の div を超えると、マウスで最初の div を離れなくても、2 番目の div が連続してフェードインおよびフェードアウトすることです。

HTMLコードは次のとおりです。

<div id="content">
    <h1>Portfolio</h1>
        <div id="web">
            <p>Web apps</p>
            <a href="#">
                First link
            </a>
        </div>
        <div id="commentweb">
            <p>The text that I want to show</p>
        </div>
</div>

これはjQueryです：

$(document).ready(function() {

$("#web").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

$("#commentweb").hide();

$("#web").hover(
  function () {
    $(this).children("a").children("img").attr("src","2.png");
    $(this).css("background-color","#ecf5fb");
    $(this).css( 'cursor', 'pointer' );
    $(this).css('border','1px solid #378ac4');
    $(this).children("p").css("opacity","1.0");
    $('#commentweb').stop(true, true).fadeIn();
  }, 
  function () {
    $(this).children("a").children("img").attr("src","1.png");
    $(this).children("p").css("opacity","0.5");
    $(this).css("background-color","#e8e3e3");
    $(this).css('border','1px solid grey');
    $('#commentweb').stop(true, true).fadeOut();
  }
);
});

#web を超えたときにフェードイン アニメーションを開始し、その div を離れるときにフェードアウト アニメーションをちらつきなく (つまり、一定のフェードインとフェードアウト) 開始するにはどうすればよいですか?

問題を示すためにフィドルを追加しました: http://jsfiddle.net/mMB3F/ 基本的に、テキストにカーソルを合わせると発生します。

4

3 に答える 3

1

アップデート

私の他の答えは少し壮大すぎました。他のdivをフロートするだけです

#commentweb {float:left}

http://jsfiddle.net/mMB3F/5/

非同期である必要があり、stop() が点滅の原因ですが、フェードが完了するのを待ってからイベント ハンドラーを割り当てる場合は、停止する必要はありません。

http://jsfiddle.net/u7Q9P/1/

于 2012-08-26T01:48:20.567 に答える
1

この問題は、ホバー イベントを割り当てている div 内にコメント div があるために発生します。ちらつきは、下の画像に示されている強調表示された領域 (赤) にマウス ポインターを入力すると発生することに注意してください (コメント div に関連)。

ここに画像の説明を入力

このソリューションを見てください：http://jsfiddle.net/davidbuzatto/mMB3F/1/

コメント div に絶対配置が追加されました。マウスが入ると、ポインタの横にコメント div が表示されます。もちろん、必要に応じてコードを変更する必要があります。これを行う別の方法は、#web div を囲む div コンテナーを設定し、その隣に別の div を配置して、それらをフロートに設定することです。新しい div 内に、コメント付きの div を挿入します。

于 2012-08-25T16:40:22.227 に答える
0

jquery.mouseenter()を使用して、それ.mouseleave()を回避します。そうすれば、CSS で何かを再配置する必要はありません。

詳細については、こちらの回答を参照してください

于 2012-08-25T16:55:29.303 に答える