2

私は 4 つspanをmouseOver作成top:20pxしmouseOutましたtop:-20px。

私はこのコードを書きました：

    $(".pull_down").mouseover(function(){
        $(this).animate({top:'20px'});  
    });
    $(".pull_down").mouseout(function(){
        $(this).animate({top:'-20px'}); 
    });

すべてがこれをspan持つ同じクラスpull_downを持っていますCSS style:

.pull_down
{
    -webkit-msie-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);


    background:#900;
    color:#FFF;
    font-size:20px;
    text-transform:capitalize;
    font-weight:bold;
    padding:5px;
    position:absolute;
    border:#000 solid 2px;
    border-bottom-left-radius:10px;
    padding-right:100px;
    z-index:500;
    width:100px;
}
.pull_down:hover
{
    cursor:pointer;
}

基本的にこれは使い物になりません。

ここに問題があります。マウスがこれらの要素の上を 1 回以上 (たとえば 7 回) 通過すると、これらのアニメーションがキューに入れられ、ぎこちなく見えます。

だから私が望んでいたのは、スパンにカーソルを合わせるとアニメーションが開始され、別のスパンに切り替えると最後のスパンがその位置に復元されることでした。

一例はこちら

.stop()の関連記事も読みましたが、これを行う方法がわかりませんでした。

4

2 に答える 2

5

jQuery の優れた特性の 1 つは、時間指定されたイベントのシリアル処理を可能にするメソッド チェーンです。

.stop() を使用してコードを書き直すと、そのトリックを実行できるはずです。

このような

$(".pull_down").mouseover(function(){
    $(this).stop().animate({top:'20px'});  
});
$(".pull_down").mouseout(function(){
    $(this).stop().animate({top:'-20px'}); 
});

これにより、選択した DOM オブジェクトのアニメーション キューがクリアされ、すぐに処理されるアニメーションが追加されます。

他のすべてのスパンを停止するには、次のように呼び出し内でセレクターを再利用するだけです

$(".pull_down").mouseover(function(){
    $(".pull_down").stop();
    $(this).animate({top:'20px'});  
});
$(".pull_down").mouseout(function(){
    $(".pull_down").stop();
    $(this).animate({top:'-20px'}); 
});
于 2013-06-30T18:44:09.150 に答える
0

.stop( [clearQueue ] [, jumpToEnd ] )を使用する

$(".pull_down").mouseover(function(){
    $(this).stop(true, true).animate({top:'20px'});  
});
$(".pull_down").mouseout(function(){
    $(this).stop(true, true).animate({top:'-20px'}); 
});
于 2013-06-30T18:38:12.343 に答える