0

マウスオーバーとマウスアウトで表示/非表示を使用しようとすると、予期しない効果とその他のバグが発生します。

私がやろうとしていたのはボックス (div) で、マウスをその上に置くと、別のボックスが表示されて右にスライドします。

ここにフィドルがあります http://jsfiddle.net/XtXGR/

今、それには2つの問題があります。1つはちらつき、もう1つは左上隅から成長して現れることで、私がやりたいのは左から現れることです。

どんな助けでも大歓迎です。ありがとう

同様の質問からちらつきの原因はわかっていると思いますが、他の問題についてはまだ助けが必要です。ありがとう！

ああ、これが使用されるコンテキストがアイテムのテーブルを持つページ上にあり、各アイテムが上に投稿したフィドルリンクのオブジェクトになることも知っています。

4

6 に答える 6

4

主な問題は、コンテナーの別の子要素を移動するmouseoutと andのmouseover組み合わせがトリガーされることです。これが、要素が展開されたり折りたたまれたりするのを見る理由です。IE は、CSS とまったく同じように動作するmouseenterandmouseleaveイベントでこれを回避しました:hover。

そういえば、jQueryhover関数にもこの機能があります。と の代わりにそれを使用する必要がmouseoverありmouseoutます。

showAPIによると、slideエフェクトを使用して必要なものを取得する必要があります。

最終的なコードは次のようになります: http://jsfiddle.net/XtXGR/28/

于 2012-06-12T14:56:32.733 に答える
1

いくつかのこと：

フェードイン/アウトを行いたい場合は、これがより良いでしょう:

$(document).ready(function(){
    $("div.item_container").hover(function() {
         $("div.item_body").fadeIn(500);
    }, function() {
         $("div.item_body").fadeOut(500);
    });

});

また、おそらく div.item_bodyを左にフロートする必要があります..

デモ: http://jsfiddle.net/lucuma/XtXGR/33/

于 2012-06-12T14:57:18.500 に答える
0

私は何か速いものを作りました、あなたはそれに夢中になることができます:) アニメーションはかなりスムーズです。

http://jsfiddle.net/XtXGR/50/

于 2012-06-12T15:03:25.927 に答える
0

コードに多くの問題がありました。href が無効で、要素のフローティングが 100% 正しくありませんでした。主な問題の 1 つは、CSS に display:none が含まれていたことです。その dispay:none を CSS から取り出し、表示/非表示にするアイテムにインラインで配置します。デフォルトの状態が「非表示」の場合、display:none をインラインにする必要があります。

このフィドルを見て、もう少し有効な構文でこれを行う方法をよりよく理解してください: http://jsfiddle.net/fH3EC/1/

于 2012-06-12T15:02:59.347 に答える
0

このようなもの？スライドを使用すると、デフォルトの左効果からスライドが得られます。

$(document).ready(function(){
    $("div.item_container").on('hover',function(){
        $("div.item_body").toggle('slide',500);
    });
});​

http://jsfiddle.net/XtXGR/25/

于 2012-06-12T14:54:49.737 に答える
0

代わりに CSS3 トランジションを使用するのはどうですか?

これを参照してください：http://jsfiddle.net/EVDj6/2/

于 2012-06-12T14:53:55.560 に答える