从底部拉出一个div [英] Pull out a div from the bottom

问题描述

我的代码位于 jsfiddle

<很简单，我想从底部，在固定大小的页面（1920x1080）上拉出来，我有这个示例工作从右边缘拉，但不知道如何将它移动到底部。

非常感谢您的帮助

HTML

 < div id =slideout> 
< div id =slidecontent> 
 Yar，那里有蜻蜓！ 
< / 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 ，持续时间：500}）; 
}）; 
}）; 
  

款式：

  body {
 overflow-x：hidden; 
} 
 #slideout {
 background：＃666; 
位置：绝对; 
 width：280px; 
 height：80px; 
 top：45％; 
 right：-280px; 
 padding-left：20px 
} 
 
 #clickme {
 position：absolute; 
 top：0;左：0; 
 height：20px; 
 width：20px; 
背景：＃ff0000; 
} 
 
 #slidecontent {
 float：left; 
 
  

解决方案

href =http://jsfiddle.net/yHPTv/889/ =nofollow> jsFiddle ..

基本上我复制并粘贴你的代码，并使用 bottom 定位进行操作。这样你就可以在CSS和JS中看到两者之间的区别。它基本上与您发布的代码具有相同的逻辑。

请注意，主体现在具有 overflow：hidden; 而不是 overflow-x：hidden;

I have this code at jsfiddle

Quite simply, I want to pull it out from the bottom, on a fixed size page (1920x1080), I have this sample working to pull from the right edge, but not sure how to move it to the bottom.

Many thanks if you can help

HTML

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

Script

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

Style:

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;
}

解决方案

Look at the following jsFiddle..

Basically I copied and pasted your code and manipulated using bottom positioning. that way you will be able to see the differences between the two.. both in CSS and JS. it is essentially the same logic as the code you posted.

Note that the body now has overflow:hidden; instead of overflow-x:hidden;

这篇关于从底部拉出一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！