하나의 목록으로 여러 개의 목록 축소 애니메이션

Question

페이지에 여러 목록이 있습니다. 존재할 수 목록의 수는 임의이지만,이 페이지의 두 가지보기가 있습니다 가능성이 10

로 제한 될 것입니다 :

• 모드 1 : 모든 항목을 분류하고 별도의 차선에 나열되어가 .
• 모드 2 : 모든 항목이 단일 목록으로 축소됩니다.

사용자는 두 가지 모드를 전환 할 수 있어야합니다. 나는 이것들을 [대략] 작동 시켰습니다 - 그들은 하나의 목록으로 붕괴되었지만 그들의 부모/원점 목록으로부터 그들의 스타일을 잃습니다.

이상적으로는 애니메이션 모드로 전환하는 것이 좋습니다. 즉, 사용자가 모드 전환 버튼을 클릭하면 각 레인의 모든 목록 항목이 알파벳순으로 나열된 단일 목록으로 이동/축소됩니다. 모드 2 (단일 목록 모드)으로 전환 한 다음 다시 토글을 클릭하면 목록 항목이 원래 목록에 다시 애니메이션으로 표시됩니다. 내 코드에서

Here's a Fiddle I've been working on.

, 나는 항목으로 축소 할 수 있습니다 숨겨진 <ul>으로, 네 개의 목록을 가지고있다. 애니메이션이 어떻게 그리고 어디서 움직이는 지 파악하는 데 어려움을 겪고 있습니다.

$(function() { 
    $("button").on("click", function() { 
     if($(this).text() == "Mode 1") { 
      $("#list").show(); 
      $("li").remove().clone().appendTo("#list"); 
      $("ul:not(#list)").hide(); 
      $("button").text("Mode 2"); 
     } 
    }); 
}); 

---

<button>Mode 1</button> 

// The hidden list 
<ul id="list"></ul> 

<ul id="red"> 
    <li>A</li> 
    ... 
</ul> 
<ul id="blue"> 
    <li>K</li> 
    ... 
</ul> 
<ul id="gray"> 
    <li>U</li> 
    ... 
</ul> 
<ul id="green"> 
    <li>AA</li> 
    ... 
</ul> 

편집 : 나는 내가 목표로하고있어 애니메이션을 지정해야합니다 같아요. 각 개별 목록 항목을 원래 위치에서 단일 축소 된 목록으로 "이동"하고 싶습니다.

Answer 1

좋아, Jon, 각 조각이 현재 위치에서 새로운 위치로 움직이게하려면 각 요소의 오프셋을 가져 와서 position:absolute;으로 만들고 올바른 위치에 애니메이션을 적용하십시오.

In-progress fiddle here

는 여기를 동반하는 jQuery의. 이 또한 같은 당신의 HTML 레이아웃을 유지 :이 무엇

$(function() { 
$("button").on("click", function() { 
    if($(this).text() == "Mode 1") { 
     var elem = $('ul:not(#list) > li'), 
      elemH = elem.first().outerHeight(), 
      list1Last = {x:$('#red > li:last-of-type').offset().left, 
         y:$('#red > li:last-of-type').offset().top}, 
      oElem = {x:0, y:0, w:0, h:0} 
     $('ul:not(#red)').each(function(e){ 
      $(this).find('li').each(function(i){ 
       oElem = {x:$(this).offset().left, 
         y:$(this).offset().top, 
         w:$('#red').width(), 
         h:$(this).outerHeight()} 
       console.log(oElem.x, oElem.y); 
       $(this).css({"position":"absolute", 
          "top":oElem.y+(oElem.h*i)+"px", 
          "left":oElem.x+"px", 
          "width":oElem.w+"px"}); 
       $(this).delay(200*i).animate({"top":(list1Last.y+elemH)*e+(i*elemH)+"px", 
               "left":list1Last.x+"px"}, 200); 
      }); 
     }) 
    } else { 

    } 
}); 
}); 

그것이 offset()을 사용하여 각 요소의 현재 위치를 얻을 수있다, 나는 그들에게 position:absolute;을하고 그들에게 left 및 top 가치를 제공하기 위해 CSS를 변경합니다. 이렇게하면 부딪히지 않고 완벽하게 배치 할 수 있습니다. 그런 다음 곧바로, 나는 당신이 말하는 것처럼 그들이 날아 다니는 것처럼 거의 새로운 지점으로 움직입니다. 한 번에 하나씩 날아갈 수있는 방법이 있지만 좀 더 편집해야합니다.