颠倒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/