내 펑키 메뉴 애니메이션하기

Question

나는 친구를 위해 만든 사이트에서 내비게이션 아이디어를 가지고 놀았습니다. 그것은 모두 하나의 페이지에있을 것입니다. 다양한 탐색 링크는 클릭 한대로 콘텐츠를 표시하거나 숨기는 것입니다. 나는, 그러나, 링크를 클릭하고 나면 탐색 애니메이션됩니다에 도움을 찾고 있어요 무엇

- 나는 모형 아래 제작 한 :

http://jsfiddle.net/LimeBlast/pp9Hk/

당신이 볼 수 있듯이, 각 상자의 크기가 작습니다. 링크 중 하나를 클릭하면 바깥 쪽 가장자리 상자로 자동으로 이동합니다. 원래 바깥 쪽/위쪽 바깥에있는 모든 항목이 이제 아래/안에 표시됩니다.

JQuery와 나는 다음과 같이이 어떻게 만들어 :

$('#navigation').on('click', 'li', function(){ 
    var $self = $(this); 
    $self.prevAll().addClass('clone'); 
    $('.clone').clone().removeClass('clone').appendTo('#navigation'); 
    $('.clone').remove(); 
}); 

나는이 그것을 할 수있는 올바른 방법인지 모른다, 그러나 작동하는 것 같다 - 지금이다 내가 달성하고자하는 모든 어떤 종류의 애니메이션 효과가 추가됩니다 : 즉, 선택한 요소가 천천히 바깥 쪽 가장자리로가는 길에 들어갑니다. 위의 요소가 내부에 나타나는 것처럼 ...

(내가 아는 경우 의미?)

누구든지 나를 도와 줄 수 있습니까? 나는 jQuery에별로 좋지 않다.

Answer 1

당신이 요소를 복제하고 있기 때문에, 당신은 이벤트 위임 사용할 필요가 :

$('#navigation').on('click', 'li', function(){ 

이 귀하의 질문에 있었다가 아니라 원래 바이올린있다.

그러나 선택한 li (및 그 뒤의 항목)을 목록에 추가하기 만하면 많은 문제를 줄일 수 있습니다. 이렇게하면 기존 요소가 옮겨 지므로 복제 할 필요가 없습니다. 내가 눈치

var $self = $(this); 
$self.nextAll().addBack().prependTo('#navigation'); 

http://jsfiddle.net/mblase75/8KrHh/

Answer 2

하나의 문제는 복제 된 버전은 jQuery를 리스너가 연결을 클릭하지 않았을 때문에 각 메뉴 항목은 한 번 선택 될 수 있다는 것이다. 여기

$('#navigation').on('click', 'li', function() { 
    var $self = $(this); 
    $self.prevAll().addClass('clone'); 

    $('.clone').clone().removeClass('clone').appendTo('#navigation'); 
    $('.clone').remove(); 
}) 

데모 : http://jsfiddle.net/mchail/pp9Hk/4/

UPDATE

을 내가 애니메이션 일에 균열을했다 그래서 같이 이벤트를 위임하여이 확정. 데모 위치 : http://jsfiddle.net/mchail/pp9Hk/5/

나는 CSS에서 위치를 자바 스크립트로 옮겼다. 요소를 클릭하면 목록의 시작 부분 인 li으로 이동하고 각 요소는 목록의 새 순서에 따라 재배치됩니다. jQuery의 animate 함수를 사용하면이 위치 변경에서 애니메이션을 쉽게 추가 할 수 있습니다 (css3 전환을 사용하는 것보다 브라우저 호환 가능).당신이 완화와 재생하려면 여기 animate 문서 밖으로

점검 :