정적 div로 화면의 오른쪽 가장자리에서 div를 밀어 내기

Question

onclick은 페이지의 정적 버튼/이미지/div를 사용하여 별도의 div를 활성화하여 화면의 오른쪽에서 슬라이드합니다.

이

http://jsfiddle.net/yHPTv/876/

코드 :

이

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

자바 스크립트 :

이

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

CSS가 :

문제가

body { 
    overflow-x: hidden; 
} 
#slideout { 
    background: #666; 
    position: absolute; 
    width: 280px; 
    height: 80px; 
    top: 45%; 
    right:-280px; 
    padding-left: 20px 
} 

#clickme { 
    position: absolute; 
    top: 0; left: 0; 
    height: 20px; 
    width: 20px; 
    background: #ff0000; 
} 

#slidecontent { 
    float:left; 
} 

이며,이 링크는 내가 원하는 거의이다 버튼을 슬라이드시키지 않으려면 페이지의 고정 된 위치에 있어야합니다. 나는 새롭게 보이는 div 내에서 '닫기'버튼을 원합니다. 어떤 아이디어. 고마워 x

Answer 1

하나의 가능한 해결책은 대신 콘텐츠 div를 슬라이드하는 것입니다. 뭔가 같은 :

http://jsfiddle.net/yHPTv/877/

업데이트 CSS :

#slidecontent { 
position: absolute; 
right: 0px; 
} 

업데이트 JS :

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