Question

我想要创建一个滑块面板，它将隐藏，当我点击，然后它打开并隐藏，我正在尝试使用此代码但无法获取，当我使用.hide然后.animate功能不起作用。使用show然后div不滑动它只是打开表单顶部。但我需要滑块打开形式正确。

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <style>
    body{
      background-color:#FFF;
      height:100%;
      width:100%;
      margin:0;
      color:#ccc;
      font-size:3em;
      line-height:100px;
      text-align:center;
      overflow:hidden;
    }

    .slider{
      background:#30373f;
      position:absolute;
      width: 100%;
      height:100%;
      top: 0;
      right:0px;
    }

    </style>
    <script type="text/javascript">
    $(document).ready(function(e) {
     $('.slider').hide();
    });
    $(document).ready(function(e) {
     $('.click').click(function(e) {
       $('.slider').animate({right:'100%'}); 
    });
    });
    </script>
    </head>
    <body>
    <div class="click">click for slider</div>
    <div class="slider">
    <div class="text" style="color:#fff; float:right; margin-right:5px; top:10px; z-index:99999; background:#000; position:relative;"><h3><i class="fa fa-times" aria-hidden="true"></i></h3></div>   
    </div>
    </body>
    </html>

Answer 1

您可以参考下面的代码来了解一下。在页面加载时，滑块的right位置设置在可见范围之外，在click标签上我们设置其right位置以使其可见。

＆＃13;

$(document).ready(function(e) {
   
     $('.click').click(function(e) {
       $('.slider').animate({right:'0px'}); 
     });
  
     $('.hideButton').click(function(e) {
       $('.slider').animate({right:'-100%'}); 
     });
 });

＆＃13;

body{
      background-color:#FFF;
      height:100%;
      width:100%;
      margin:0;
      color:#ccc;
      font-size:3em;
      line-height:100px;
      text-align:center;
      overflow:hidden;
    }

    .slider{
      background:#30373f;
      position:absolute;
      width: 100%;
      height:100%;
      top: 0;
      right:-100%;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body>
    <div class="click">click for slider</div>
    <div class="slider"></div>
    <div class="text hideButton" style="color:#fff; float:right; margin-right:5px; top:10px; z-index:99999; background:#000; position:relative;"><h3><i class="fa fa-times" aria-hidden="true">Hide</i></h3></div>
</body>

＆＃13;

Answer 2

animate（{right ...使得滑块的属性改变，而hide（）将其完全隐藏。所以即使你改变'right'属性，你的滑块仍然是隐藏的。你要么必须删除hide（）只需使用css（最好的选项imo）移动滑块，或者移除animate（）并使用show（），但是对于滑动动画，你必须使用第一个选项。

Answer 3

你遇到的问题是.hide（）将“display：none”样式添加到.slider div中，然后在使用.show（）之类的动画制作动画之前将其删除。

这可能是一个更好的主意，而不是隐藏div使其宽度为0。

Answer 4

您只能在页面中使用1个document.ready功能。

$(document).ready(function(){
   $('.slider').hide();
    $('.click').click(function(e) {
      e.preventDefault();

       var slider = $('.slider');

       if(slider.css('display') == "none"){
          $('.slider').animate({right:'0'}); 
       }else{
          $('.slider').animate({right:'-100%'}); 
      }
   });  
});

默认情况下，滑块应显示为none，右侧值应为-ve。

j查询右侧滑块面板

4 个答案: