從屏幕右側拉出div

從左側拉出div？易如反掌。從右邊拉出來？沒那麼多。從屏幕右側拉出div

我正在尋找一個隱藏在屏幕外的div，但連接到屏幕上的一個小標籤。當用戶點擊標籤時，滑出整個div。這是從左邊使用jQuery和CSS非常基本的。從右側開始，用戶可以滾動瀏覽「隱藏」div！

這裏是我想要的（http://jsfiddle.net/yHPTv/）除了沒有在div是部分隱藏屏幕外走後，我想這部分隱藏屏幕外右側。

這是我到目前爲止嘗試過的（http://jsfiddle.net/LU8En/），顯然它不起作用，因爲可以滾動到右側。

使用動畫（或幻燈片或切換下拉）的問題是，我不希望整個div只是消失/出現，我想要一點點存在。

來源

2012-05-02 ScottieB

第二的jsfiddle似乎並不符合您的描述;該div仍然從左側拉出。我誤解了嗎？ – Jacob

對不起，在我開始進行更改之前，我必須複製它。 – ScottieB

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來防止水平滾動條。

一些小的更新，使得它與最新版本兼容：

$(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/

來源

2012-05-02 21:34:49

啊，溢出！感謝你們既合適又快速！ – ScottieB

舊帖子，但也許有人會看到這一點。這個例子不適用於從不JQuery。任何快速解決方案來解決？ – John

是的，用咔嗒聲替換開關。 .toggle不再綁定點擊事件。 –

可能需要做：

body,html { overflow-x:hidden; }

只是身體無「HTML」沒有爲我工作。

來源

2014-01-08 07:51:52 Chris

我正在使用此鏈接中的代碼：http://jsfiddle.net/yHPTv/ 我做了一些更改，#clickme按鈕現在位於#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>

正如你所看到的，我還添加了淡出效果，給我點擊按鈕，因爲我需要做的就是添加了#slideout箱內關閉按鈕來關閉它放回而不是主＃的點擊按鈕。

幫助非常感謝！

謝謝！

來源

2014-05-30 08:25:45

請檢查以下代碼和鏈接以及它可能會幫助你。

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>

來源

2014-08-12 17:39:38 Avi

從屏幕右側拉出div

回答

相關問題