1

ここに画像の説明を入力 上の図は私のシナリオを示しています。ユーザーがボタンをクリックすると、 Jquery関数divを使用して場所 'A' [100,100] から場所 'C' [100,500] に移動します。その再配置中に、場所 'B' [100,250] を通過する必要があります。その時点で、場所 B を横切ると、別のアニメーションを起動する必要があります。Animate()div

この問題に関連して、私は何度もサーフィンをしてこのリンクを見つけましたが、受け入れられた答えがありません。また、Jquery には というイベントがありますが、Change残念ながら としか互換性がありませんform elements。私の質問は、それが本当に存在しない場合、jquery などのイベントを手動でpostionChanged処理できるかということです。offsetChangedまたは、私のニーズを達成するために利用可能な実行可能な方法はありますか?

ありがとう..！

4

3 に答える 3

1

これが実用的な解決策です：私もステップイベントを使用しました

HTML

<div id="#wrapper">
  <div class="left"></div>
  <div class="right"></div>
  <div class="dot"></div>
</div>
<button class="go">GO!</button>

CSS

#wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.left, .right {
  position: absolute;
  top: 25px;

  width: 100px;
  height: 100px;
}
.left {
  z-index: 1;
  left: 25px;
  background-color: red;
}
.right {
  right: 25px;
  background-color: green;
}

.dot {
  position: absolute;
  top: 72.5px;

  width: 5px;
  height: 5px;
  left: 50%;
  margin-left: 2.5px;

  background-color: blue;
}

button.go {
  display: block;
  position: absolute;
  top: 150px;
  left: 25px;
}

jQuery

var $left = jQuery('.left');
var $right = jQuery('.right');
var $button = jQuery('button.go');
var $dot = jQuery('.dot');

var rightPos = $right.offset().left;
var dotPos = $dot.offset().left;
var thread = undefined;
var animationStarted = false;

$button.click(function() {
  $left.animate({
    'left': rightPos
  }, {
    duration: 1000,
    specialEasing: {
      'left': 'easeOutQuad'
    },
    step: function(now, fx) {
      if (!animationStarted && now +$left.width() > dotPos) {
        if (thread) { clearTimeout(thread); }
        thread = setTimeout(function() {
          animation();
          animationStarted = true;
        }, 0);
      }
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

function animation() {
  $right.animate({
    'background-color': '#0000ff'
  }, {
    specialEasing: {
      'background-color': 'easeOutQuad'
    }
  });
};

step-function内でsetTimeoutを使用して、別のコンテキストで2番目のアニメーションを呼び出したことに注意してください。実行中の1つのアニメーション内で.animate（）呼び出しを実行するのが適切かどうかはわかりません。スムーズに保つためには、こうする方がいいと思います。誰かがそれを正確に知っていますか？

もう1つのポイントは、変数animationStartedです。2番目のアニメーションを呼び出したかどうかを覚えているだけです。これは、他のアニメーションのステップイベント内で複雑なアニメーションを呼び出さないようにするためのもう1つのことです。このように、私たちは確かにそれを一度だけ呼びます。

デモ

于 2013-01-08T19:46:19.097 に答える
1

jQuery.animate次のメソッドをサポートするオプション引数を取ります (ソース)[http://api.jquery.com/animate/]

step タイプ: Function( Number now, PlainObject fx ) アニメーションの各ステップの後に呼び出される関数。

あなたの場合、コードは次のようになります。

$('div').animate({
  left: 500
}, {
  step: function(now, fx){
    if (parseInt(now, 10) === 250){
      // call your animation method here.
    }
  }
})
于 2013-01-08T19:23:38.240 に答える
1

各ステップでアニメーションをテストし、関数を実行して位置をテストする必要があります。これは API ドキュメントからのもので、アニメーション用に簡単に転用できます。

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
  }
});

私はそれのためにフィドルを作りました。http://jsfiddle.net/MatthewDavis/6g8aP/1/

于 2013-01-08T19:19:19.030 に答える