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