Question

图片比我更好地解释了它。

它是窗口侧面的固定按钮，单击时会滑出。

我一直在网上搜索这么久，找不到解决方案。你能帮帮我吗？

Answer 1

下面的代码可以帮到你。

HTML

<section id="hiddenPanel" class="txt-highlight-color bg-color bg-pattern">
  <span id="close-bar" class="myButton"> < </span>
</section>

CSS

#hiddenPanel {position:fixed; top:0; right:-200px; width:200px; background-color:grey; height:250px;}
#close-bar { position:absolute; left:-20px; background:red; color:white; width:20px; height:250px;}

jQuery代码

var speed = 300;
    $('#close-bar').on('click', function(){

        var $$ = $(this),
            panelWidth = $('#hiddenPanel').outerWidth();

        if( $$.is('.myButton') ){
            $('#hiddenPanel').animate({right:0}, speed);
            $$.removeClass('myButton')
        } else {
            $('#hiddenPanel').animate({right:-panelWidth}, speed);
            $$.addClass('myButton')
        }

    });

http://jsfiddle.net/Rxsd5/

Answer 2

基本上我在jquery中做，但是我给了css的代码..我使用悬停而不是点击。并改变这些css值并与之一起玩..

<div class="wrapper">
    <div id="slide">
     //content or form goes here.. 
    </div>
</div>

.wrapper {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px; 
    border: 1px solid black;
}

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    transition: 1s;
}
.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

单击按钮后，Div将从左侧滑动

2 个答案: