1

コールバックやこれが何であるかを理解するのに苦労しています。イージングと呼ばれるjqueryアドオンを使用していますが、ボタンをクリックするとdivが左から飛び出し、そのdivのxをクリックすると右に飛び出します。問題は、もう一度クリックすると、右から右に飛んでくるということです。私がやりたいことは、アニメーションの再生が終了したときに div を元の位置に戻すことです。

<script>
$(document).ready(function() {
    $('#button').click(function(event) {
        $('#animdiv')
            .animate(
                { left: 170 }, {
                    duration: 'slow',
                    easing: 'easeOutBack'
                });
});
    $('#exit').click(function(event) {
        $('#animdiv')
            .animate(
                { left: 1200 }, {
                    duration: 'slow',
                    easing: 'easeOutBack'
                });
    });
});
// this is the function that takes it back to it's original place
function placeDiv(x_pos, y_pos) {
  var d = document.getElementById('animdiv');
  d.style.position = "absolute";
  d.style.left = -600;
  d.style.top = 32;
}

</script>
4

2 に答える 2

0

ははは、アニメーションが完了した後のコールバックがあることを知りませんでした。それを使用します。私の答えを忘れてください。

これを行ういくつかの方法 -

  1. 飛び出す div は、右から左に発生する可能性があります。その場合、終了クリックの左の値を変更するだけです -

    $('#exit').click(function(event) {
    $('#animdiv')
        .animate(
            { left: -600 }, {
                duration: 'slow',
                easing: 'easeOutBack'
            });
});

  2. エントリをアニメーション化する前に、div を非表示にし、-600px に再配置し、display: block に変更してからアニメーション化します -

    $('#button').click(function(event) {
    $('#animdiv').hide().css('left', '-600px').show()
        .animate(
            { left: 170 }, {
                duration: 'slow',
                easing: 'easeOutBack'
            });
于 2013-05-28T15:21:47.913 に答える