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/