jquery를 사용하여 오른쪽 상단에서 div를 슬라이드하는 방법은 무엇입니까?

일부 숨겨진 div가 있고 버튼을 클릭하면 div를 표시하려고합니다.jquery를 사용하여 오른쪽 상단에서 div를 슬라이드하는 방법은 무엇입니까?

나는 slideDown을 보았지만 그것이 내가 원하는 것만은 아니다. 나는 숨겨진 div가 원래의 크기로 아무것도 만들지 않고 (숨겨진) div의 오른쪽 위 모서리에서 이렇게하고 싶습니다.

2013-05-24 Martijn

fadeIn을 슬라이드 다운 대신 사용하십시오 –

어쩌면 움직일 수 있습니까? http://api.jquery.com/animate/ 지금까지 시도한 내용으로 몇 가지 코드를 게시하여 도움을받을 수 있습니까? – 97ldave

$("#box").show('size', { origin: ["top", "right"] }, 2000);

사용 .toggle() 당신은 같은 이벤트와 숨길 수 있도록하려면 대신합니다.

첫 번째 매개 변수는 우리가 사용하는 효과입니다 (size). 두 번째 매개 변수는이 효과와 관련된 옵션의 개체이며 origin 만 사용하여 크기를 조정해야하는 위치를 지정합니다. 세 번째 매개 변수는 밀리 초 단위의 지속 시간으로, 여가 시간에 변경할 수 있습니다.

라이브 예 : http://jsbin.com/uwonun/1

출처

2013-05-24 09:12:07

고마워,이게 다야! – Martijn

이 당신이 원하는 완전히 아니지만, 그것은 어쩌면 수정할 수 있습니다 :

당신은 "size" 매개 변수와 함께 다이빙에 jQuery를 UI .effect 방법을 사용할 수 있습니다. 이 옵션에서 사용자 정의 할 수 있습니다 당신은 어떻게 여기에 작동 할 수 있어야한다 :

http://jqueryui.com/effect/

행운을 빕니다, 나는이 도움이되기를 바랍니다!

출처

2013-05-24 09:08:32 samdy1

내가이 도움이 희망이 하나

<html> 
    <head> 
     <style type="text/css"> 
      #slideDiv{display:none;width:400px;height:300px;position:absolute;top:0;right:0;background:#ff0000;color:#fff;} 
     </style> 
    </head> 
    <body> 
     <div id="slideDiv"> </div> 
     <button id="startSlide">Start Slide</button> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $(function(){ 
       $('#startSlide').on('click', function(){ 
        $('#slideDiv').toggle('slow', function() { }); 
       }) 
      }) 
     </script> 
    </body> 
</html>

보십시오. 같은 매개 변수

출처

2013-05-24 09:11:56 Mahesh

그것에 아무것도에서 성장은 원래 크기와 (숨겨진) 사업부의 오른쪽 상단에서이 작업을 수행합니다.

내가 토글 당신이 필요하지 생각 ...

하면이

HTML

을 시도

<div id="test"></div> 
<button id="button">click</button>

JQuery와

$(function(){ 
    $("#button").click(function(){ 
     $('#test').toggle('slow'); 
}); 
});

당신이 두 번째 클릭에있는 애니메이션이 필요하지 않습니다 넣다 경우

는이 해킹의 경우 one()

$(function(){ 
    $("#button").one('click',function(){ 
     $('#test').toggle('slow'); 
}); 
});

fiddle here

출처

2013-05-24 09:16:43 bipen

이것은 실제로 원하는 효과이지만, 오른쪽 상단 구석 대신 왼쪽 위 구석에서 div를 표시합니다 .. – Martijn

확실하지 사용할 수 있습니다. 하지만, 난 그냥 jQuery를 UI없이 I (당신이) 원하는 걸 얻었 발견 (그리고 내 보좌관/이물 빌드에서 즉시 라이브러리를 제거) :

var isLeft = !$myRelorAbsDiv.position().left; // 2-col layout, with floated divs 
$myRelorAbsDiv.css(isLeft? "left":"right", 0).show("slow");

를 컨테이너의 폭에 따라 2 COL (에서 만...위의 코드는 (show 메서드 호출 바로 전에 CSS 위치 지정으로 인해) 오른쪽 열 (왼쪽 애니메이션 인 경우 첫 번째 열에있는 경우)에서 오른쪽에서 일어날 애니메이션을 발생시킵니다. 나는 거의 이것을 jquery-ui로 가져왔다. blah :)

출처

2013-10-04 07:38:58

그건 그렇고, 당신은 숨겨진 div를 먼저 보여 주길 원할 것입니다. 형세'. –

또한 IE8 이하의 모든 브라우저에서 jQuery 1.9로 테스트되었습니다. 똑같이 작동합니다. –

jquery를 사용하여 오른쪽 상단에서 div를 슬라이드하는 방법은 무엇입니까?

답변

관련 문제