反转jquery动画

时间:2013-10-21 13:37:04

标签: jquery animation

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

$(document).ready(function() {

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

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

这样做的权利是什么?

1 个答案:

答案 0 :(得分: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/