Jquery는 div를 통해 애니메이션을 만듭니다.

Question

나는이 질문에 답을 얻었습니다. 그러나 사용 가능한 마크 업으로 이동하려고 할 때 나는 운이 좋았습니다.

본질적으로 나는 4 divs 3 divs의 행을 가지고 있는데, 클릭 할 때 다음 div가 필요할 때 그리드의 다른 div를 모두 확장해야합니다. 애니메이션을 사용하고 아무 쓸모가 없어 보았습니다. 여기 테이블을 사용하는 한 예는 http://jsfiddle.net/gGc5K/입니다.

가능한 경우 nexr 메서드를 사용하여 같은 방식으로 (토글을 닫고) 작업하려면 다음 마크 업이 필요합니다.

감사

<!--div in the grid--><div class="gridBox" id="one"></div> 
    <div class="pop" id="bigOne">Content here and a toggle link</div><!--This div needs to expand over the full grid--> 

<!--div in the grid--><div class="gridBox" id="two"></div> 
    <div class="pop" id="bigTwo">Content here and a toggle link</div><!--This div needs to expand over the full grid--> 

Answer 1

var top = 0, 
    left = 0; 

$("td").click(function() { 
    var ref = $(this); 
    if ($(this).hasClass('currentAnimated')) { 
     $(this).css({ 
      "z-index": 1 
     }).animate({ 
      top: top, 
      left: left, 
      width: "40px", 
      height: "39px" 
     }, "4s", function() { 
      ref.removeClass('currentAnimated'); 
     }) 
    } else { 
     top = $(this).position().top; 
     left = $(this).position().left; 
     $(this).css({ 
      "z-index": 1 
     }).animate({ 
      top: 0, 
      left: 0, 
      width: "120px", 
      height: "120px" 
     }, "4s", function() { 
      ref.addClass('currentAnimated') 
     }); 
    } 
}); 

위의 코드 샘플에 내가 그것을하고 싶지 나는 내가 충분히 자신을 분명하게 생각하지 않는다

DEMO