1

zoom inまたはzoom outボタンをクリックしてズームできるタイムラインがあります。このタイムラインは一度にすべてが画面に収まらないため、スクロール可能な div になっています。ユーザーがクリックしてズームすると、タイムライン内の位置が同じになるようにするscrollTopため、スクロール可能な div の新しい値を計算します。これが私がやっていることの簡略化されたバージョンです：

var self = this;
...
this.zoomIn = function() {
    var offset = $("#scrollable").scrollTop();
    self.increaseZoomLevel(); // Assume this sets the correct zoom level
    var newOffset = offset * self.zoomLevel();
    $("#scrollable").scrollTop(newOffset);
};

これはうまくいきます。次に、スクロールをアニメーション化したいと思います。これはほとんど機能します：

var self = this;
...
this.zoomIn = function() {
    var offset = $("#scrollable").scrollTop();
    self.increaseZoomLevel(); // Assume this sets the correct zoom level
    var newOffset = offset * self.zoomLevel();
    $("#scrollable").animate({ scrollTop: newOffset });
};

1回クリックすると機能します。ただし、アニメーションがまだ実行されている間に の 2 番目の呼び出しがzoomIn発生した場合、アニメーションがまだそれを操作してnewOffsetいるため、オフセットが正しいscrollTop()前に設定されているため、計算が間違っています。scrollTop()

この計算を最初に行うために、jQuery のキューをさまざまな方法で使用しようとしましたが、時々うまくいくようです。

var self = this;
...
this.zoomIn = function() {
    $("#scrollable").queue(function(next) {
        var offset = $("#scrollable").scrollTop();
        self.increaseZoomLevel(); // Assume this sets the correct zoom level
        var newOffset = offset * self.zoomLevel();
        next();
    }).animate({ scrollTop: newOffset });
};

正しく理解できていないだけだと思いqueueます。zoomIn が繰り返しすばやく呼び出された場合でも、すべてを整理するにはどうすればよいですか? 私が欲しい：

zoomIn×2クリック

私に与える為に：

計算 1 -> アニメーション 1 開始 -> アニメーション 1 終了 -> 計算 2 -> アニメーション 2 開始 -> アニメーション 2 終了

そしてそうではない

計算 1 -> アニメーション 1 開始 -> 計算 2 -> アニメーション 1 終了 -> アニメーション 2 開始 -> アニメーション 2 終了

animate 2 は間違った計算に基づいているためです。

ありがとう！

4

3 に答える 3

1

うーん...どうですか: stop(true,true)? 参照: http://api.jquery.com/stop/

var self = this;
...
this.zoomIn = function() {
  var offset = $("#scrollable").stop(true,true).scrollTop();
  self.increaseZoomLevel(); // Assume this sets the correct zoom level
  var newOffset = offset * self.zoomLevel();
  $("#scrollable").animate({ scrollTop: newOffset });
};
于 2013-09-06T06:28:29.740 に答える