jquery - 反转jQuery动画

Question

我正在尝试在 jquery 中实现反向动画。我遇到了切换功能。但是我不确定如何使用它。我的单向动画代码如下：

$(document).ready(function() {

$('#popup').hide();

$('.film').click(function() {
    $('#popup').show(function() {
        $('.film').animate({top: '0px', left: '0px'}, 2, function () {
        });
    });
}); 
});

这样做的正确方法是什么？

Answer 1

您只需要保存元素的原始 css 状态就可以在之后恢复动画。下面是一个简单的例子：

// original state
var v0 = {
    top: $('div').css('top'),
    left: $('div').css('left')
};

// animation targets    
var v1 = {
    top: '50px',
    left: '50px'
};

// on click 'toggle' animation    
var clickCount = 0;
$('div').click(function () {
    if (++clickCount % 2 == 0) {
        $(this).animate(v0, 500);
    } else {
        $(this).animate(v1, 500);
    }
});

这是一个工作小提琴：http: //jsfiddle.net/PenJg/3/