javascript - 如何让 div 在动画后跳回到原来的位置？

Question

我在弄清楚回调或其他任何东西时遇到了麻烦。我正在使用一些名为 easing 的 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>

Answer 1

.animate接受一个回调函数，该函数仅在动画完成后运行:

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

但是，您的 placeDiv 函数将不起作用，直到您将 px 添加到您的样式中:

function placeDiv() {
  var d = document.getElementById('animdiv');
  d.style.position = "absolute";
  d.style.left = "-600px";
  d.style.top = "32px";
}

或者使用 jQuery(它将为您添加 px):

function placeDiv() {
  $('#animdiv').css({
    position: "absolute",
    left: -600,
    top: 32
  });
}

http://jsfiddle.net/mblase75/M6xGC/

---

或者，如果您想传递 x 和 y 值:

$('#exit').click(function (event) {
    var xpos = -600,
        ypos = 32;
    $('#animdiv')
        .animate({
        left: 1200
    }, {
        duration: 'slow',
        easing: 'easeOutBack',
        complete: function() { placeDiv(xpos,ypos); }
    });
});

和回调:

function placeDiv(x,y) {
  $('#animdiv').css({
    position: "absolute",
    left: x,
    top: y
  });
}

http://jsfiddle.net/mblase75/M6xGC/4/