화면 오른쪽에서 div를 꺼냅니다.

Question

왼쪽에서 div를 꺼내시겠습니까? 파이처럼 쉽습니다. 오른쪽에서 꺼내? 별로.

div가 화면에 보이지 않게 숨겨져 있지만 화면의 작은 태그에 연결되어 있습니다. 사용자가 태그를 클릭하면 out이 전체 div를 슬라이드합니다. 이것은 jQuery와 CSS를 사용하여 왼쪽에서 꽤 기본입니다. 오른쪽에서 사용자는 "숨겨진"div를보기 위해 스크롤 할 수 있습니다! 여기

대신되는 사업부의를 제외하고 내가 ( http://jsfiddle.net/yHPTv/)를 원하는 것입니다 부분적으로 왼쪽 오프 스크린-, 나는 그것이 부분적으로 오프 스크린 오른쪽 숨겨진 원하는 숨겨져.

내가 지금까지 시도한 것은 (http://jsfiddle.net/LU8En/)이며, 분명히 오른쪽으로 스크롤 할 수 있기 때문에 분명히 작동하지 않습니다.

animate (또는 슬라이드 또는 토글 드롭)를 사용할 때의 문제는 전체 div가 사라지거나 나타나지 않게하려는 것입니다. 그 작은 비트가 나타나기를 바랄뿐입니다.

Answer 1

http://jsfiddle.net/yHPTv/3/

은 참고 아래의 예는, jQuery를 최신 버전으로 작동하지 않습니다 않는 예를 들어 아래에 읽어 보시기 바랍니다.

$(function() { 
    $("#clickme").toggle(function() { 
     $(this).parent().animate({right:'0px'}, {queue: false, duration: 500}); 
    }, function() { 
     $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}); 
    }); 
}); 

왼쪽에서 오른쪽으로 변경 모든 것을 다음 clickme div의 텍스트 내용의 위치를 ​​변경.

또한 본체에 가로 스크롤 막대가 나타나지 않도록 overflow-x: hidden을 지정하십시오. "HTML"

body,html { overflow-x:hidden; } 

그냥 본문을하지 않고 :

$(function() { 
    var rightVal = -280; // base value 
    $("#clickme").click(function() { 
     rightVal = (rightVal * -1) - 280; // calculate new value 
     $(this).parent().animate({right: rightVal + 'px'}, {queue: false, duration: 500}); 
    }); 
}); 

http://jsfiddle.net/yHPTv/2968/

Answer 2

이 할 필요가있다 :

---

몇 가지 사소한 업데이트

최신 버전과 호환합니다 나를 위해 일하지 않았다.

Answer 3

이 링크의 코드를 사용하고 있습니다 : http://jsfiddle.net/yHPTv/ #clickme 버튼이 #slideout 상자 밖에 있습니다. 내가 할 필요가 무엇입니까 주요 # 대신이를 다시 닫습니다 #slideout 상자 안에 닫기 버튼을 추가하기 때문에 당신이 볼 수 있듯이

는

<script> 
     $(function() { 
      $("#clickme").toggle(function() { 
       $("#slideout").animate({left:'0px'}, {queue: false, duration: 500}); 
       $("#clickme").fadeOut("slow", function() { 
      }); 

      }, function() { 
       $("#slideout").animate({left:'-100%'}, {queue: false, duration: 500}); 
      }); 
     }); 
    </script> 

, 나는 또한 나를 버튼을 클릭에 페이드 아웃 효과를 추가 clickme 버튼을 클릭하십시오.

도움을 많이 받으실 수 있습니다!

감사합니다.

Answer 4

아래의 코드와 링크를 확인하여 도움이 될 수 있습니다.

http://jsfiddle.net/avinashMaddy/4bs3zp44/

<div id="slideout"> 
    <div id="slidecontent"> 
     Yar, there be dragonns herre! 
    </div> 
</div> 
<div class="clickme"> 
    &nbsp; 
</div> 



<script> 
    $(function() { 
    $(".clickme").toggle(function() { 
     $("#slideout").animate({left:'0px'}, {queue: false, duration: 500}); 
     }, function() { 
    $("#slideout").animate({left:'-280px'}, {queue: false, duration: 500}); 
    }); 
    }); 
</script>