Question

我无法搞清楚回调，或者这是什么。我正在使用一些叫做缓和的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/

Answer 2

哈哈，不知道动画完成后有回调。用那个。忘了我的回答。

这样做的几种方式 -

飞出的div可以从右到左发生。在这种情况下，您需要做的就是更改退出点击的左侧值 -

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

在为条目设置动画之前，隐藏div，重新定位到-600px，再次更改为display：block然后再设置动画 -

$('#button').click(function(event) {
    $('#animdiv').hide().css('left', '-600px').show()
        .animate(
            { left: 170 }, {
                duration: 'slow',
                easing: 'easeOutBack'
            });

在动画制作后，如何让div跳回到原来的位置？

2 个答案: