JQuery에서 .toggle() 애니메이션의 '원점'을 변경하십시오.

Question

.toggle()을 사용하여 요소를 애니메이션화 할 때 여백과 상관없이 요소가 항상 페이지의 왼쪽에서 시작하여 사라지는 것을 발견했습니다. alignment는 CSS에 의해 설정됩니다. 작은 패널을 열어 놓은 웹 페이지의 왼쪽 광고 오른쪽에 버튼이 있습니다. 왼쪽에있는 버튼은 .toggle이 패널에서 호출 될 때 잘 보입니다. 애니메이션이 페이지 측면에서 발생했기 때문입니다. 그러나 오른쪽 버튼의 경우 패널이 왼쪽에서 움직이며 페이지 전체를 오른쪽으로 지나게됩니다. 그들은 올바른 장소에서 끝나지 만, 다른 지점에서 시작하게 할 수 있습니까?

UPDATE : 이그제큐티브 소프트웨어의 디스 키퍼 다운 예, 여기 : http://jsfiddle.net/tMaJe/

Answer 1

당신은 jQuery를에 .toggle, .show 또는 .hide의 애니메이션의 효과를 변경할 수 없습니다. .animate 또는로드 jQuery UI을 사용하여 위에서 언급 한 방법에 대한 효과를 지정할 수 있습니다.

예 : 당신은 jsFiddle에 대한 조치에서 볼 수

var $foo = $("#foo"); 

// with jQuery UI 
$("button:first").click(function(){ 
    $foo.toggle("blind"); 
}); 

// without jQuery UI 
$("button:last").click(function(){ 
    if ($foo.is(":visible")) { 
     $foo.data("height", $foo.height()).animate({ 
      height: 0 
     }, function(){ $(this).hide(); }); 
    } else { 
     $foo.show().animate({ 
      height: $foo.data("height") 
     }); 
    } 
}); 

.