0

フェードインとフェードアウトのために jQuery の助けを借りましたが、必要な方法でうまく機能していません。これはスクリプトです：

$(document).ready(function(){
  $("#trivlimp").hover(function(){
    $("#trivlimp").fadeToggle("slow");
    $("#imp").fadeToggle("slow");
  });
});

私が望むようにコンテンツを表示するだけでなく、「imp」のコンテンツを表示し、ホバリングを停止するとフェードアウトするのではなく、「trivlimp」にカーソルを合わせるとフェードインとフェードアウトを続けます。左側のミニ プロファイルにカーソルを合わせると、ここで私が言おうとしていることの例が表示されます。http://trivli.b1.jcink.com/index.php?showtopic=2&st=0&#entry2

4

2 に答える 2

0

それらのボットをコンテナー内に配置し、コンテナーにホバー効果を適用してから、子を非表示にします。

サンプル: http://jsfiddle.net/TX4g5/6/

コード:JS

$(document).ready(function(){
  $("#wrapper").hover(function(){
    $("#wrapper p:first-child").fadeToggle("slow");    
$("#wrapper p:last-child").fadeToggle("slow");

  });
});​

HTML:

<div id="wrapper">
    <p>Normal visible</p>
    <p style="display:none">Visble when hovered</p>
</div>​

CSS:

/*CSS so  both p elements are above each other*/
#wrapper {
    position: relative;
}
#wrapper p{
    position: absolute;
    top: 0;
    left: 0;
}

</p>

于 2013-01-03T15:48:41.660 に答える
0

これは実際には正常な動作です。

#trivlimp を非表示にするには、ホバー機能を使用します。うまくフェードアウトしますが、完全にフェードアウトしたら、要素を「外に」ホバーすると、フェードトグルがトグルされて再びフェードします。今回はフェードインします。フェードインしているので、要素をもう一度ホバーするとフェードアウトします...

フェード解除が完了したら、非表示、なし、ブロック、インラインなどの表示設定でクラスを追加してみてください。

$("#trivlimp").fadeToggle("slow").addclass("hidden");
$("#imp").fadeToggle("slow").addclass("visible);

個人的には、これがベストプラクティスだとは思いません... mouseOver とマウスアウトを使用して効果を切り替え、クラスを自分で追加/削除することをお勧めします。

$("#wrapper").mouseover(function() {
    $("#trivlimp").fadeOut("slow");
    $("#imp").fadeIn("slow");
}).mouseout(function() {
    $("#trivlimp").fadeIn("slow");
    $("#imp").fadeOut("slow");
});

このようにして、自分がしていることをより細かく制御できます (少しタイピングが必要ですが、結果が最も重要です...)

*編集: 申し訳ありませんが、私はあまりにも率直に考えていませんでした。私が書いたコードはあなたと同じ結果をもたらすので、ラッパーを追加する必要があります...

于 2013-01-03T16:00:56.223 に答える