1

私はこれを試しました：

$('.element').animate({marginLeft: '-=1'}, 1).animate({marginTop: '+=1'}, 1).animate({marginLeft: '+=1'}, 500);

これのアイデアは、私は実際に上マージンでスライドをアニメーション化していますが、左から右にアニメーション化していることをユーザーに見せたくないということです。私の状況では、通常は左から右にスライドすることはできません。それ以外の場合は簡単です。

上記のコードでは、私が望んでいた結果が得られませんでした。しばらく遅れて、すぐに表示されました。

4

1 に答える 1

1

このタイプの手続き型アニメーションを実現するためのいくつかの異なる方法を見つけました。効果的な方法の1つは、Dioが述べたように、コールバックの「finished」関数でアニメーションを開始することです。しかし、より効果的な方法は、キューを使用することです。デフォルトのキューは「fx」ですが、カスタムキューを作成できます。私はこれを使ってキューを手伝ってくれました。

しかし、キューが気に入らず、繰り返したい場合は、setInterval関数を使用して同様の機能を作成しました。

ここで私のベータ例を参照してください。（まだ公開されていません）。例のコード例については、以下を参照してください。

<script>
            $(document).ready(function(){
        sliderAnimation();                     
    });
    sliderAnimation(){
        var timer = setInterval(function(){
            slide();},500);
    }
slide(){
    var position $('.element').pos();
    var direcLeft = '-=';
    var direcRight = '+=';
    if(position.left => 499){
        var move = direcLeft + '500';
    }
    else {
        var move = direcRight + '500';  
    }
    $('.element').animate({marginLeft : move},500)
}
</script>

このコードはテストしていませんが、距離、間隔、アニメーション間隔が同じ変数であるため、右から左に移動して繰り返す必要があります。

于 2012-11-23T12:57:16.080 に答える