0

私はjQueryを初めて使用し、正直に言うと、これがスクリプトを作成する正しい方法であるかどうかさえわかりません! こことウェブでスクリプトを調べて、これをつなぎ合わせました。とにかく、私は自分のイメージを次のようにしようとしています...

  1. 左にスライドします。
  2. 3 秒間一時停止します (遅延しますか?)。
  3. スライドして右に戻します。
  4. もう一度カーソルを合わせる前に、アニメーションを完了します。

説明をわかりやすくするために Fiddle を作成しました。
http://jsfiddle.net/brandonesc/wvezk/179/

現在、タブに何度もカーソルを合わせると、「ジッター？」というメッセージが表示されます。それがどのように引き起こされたのかさえわかりません。

お時間をいただき、誠にありがとうございました。私はこの3日間、これに困惑しています。

4

1 に答える 1

1

これは実際にはかなり複雑です。

http://jsfiddle.net/wvezk/180/

必要な操作の順序を取得するには、コールバックを活用する必要があります。また、このdata属性を使用して、イベントをいつ発生させるか、または発生させないかを追跡しました。animateまた、CSSを変更してからに切り替える必要がありましたshow。Showは、要素をコンテナにラップすることで機能します。これにより、ポップ効果が発生しました。

$('#slider').mouseover(function() {
    //if we are animating then punt
    if ($(this).data('animating') == true) {
        return;
    }
    $(this).data('animating', true);

    //animate the move
    $(this).animate({
        left: '-25px'
    }, 500, function() {
        //in callback return to original state
        setTimeout(function() {
            animationCallback();
        }, 1000);
    });
});

function animationCallback() {
    //move back
    $('#slider').animate({
        left: '0px'
    }, 500, function() {
        //in callback trun off animation
        $(this).data('animating', false);
    });
}​
于 2012-04-17T17:40:58.680 に答える