j查询右侧滑块面板

我想创建一个滑块面板，这将隐藏，当我点击，然后它是打开和隐藏，我试着用这段代码，但无法获得，当我使用.hide然后。动画功能不工作。同时使用show然后div不滑动它只是打开窗体顶部。但我需要滑块打开窗体的权利。j查询右侧滑块面板

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

来源

2016-06-08 Sanjay Yadav

你需要显示和隐藏选项右侧面板？ –

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

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

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

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

来源

2016-06-08 07:56:05 vijayP

嗨维杰我可以创建一个切换类型的动画，当我点击隐藏按钮，我不能再次打开滑块面板，我需要一个切换类型的动画，你可以帮我你 –

你好桑杰。你会在哪里隐藏按钮。你可以请更新HTML，以便我可以看看吗？那会是来自正确的面板吗？ – vijayP

yeh没关系，但问题出现在面板被隐藏并再次尝试打开时;如果没有刷新浏览器，则无法打开， –

动画（{右...使滑块改变产权，而隐藏（）隐藏它完全。所以，即使你改变“右”的财产，你的滑块仍然隐藏，您必须移除hide（），只需用css（最佳选项imo）将滑块移出屏幕，或者移除animate（）并使用show（），但对于滑动动画，您必须使用第一个选项

来源

2016-06-08 07:57:21

您遇到的问题是.hide（）将“display：none”样式添加到.slider div中那么在使用类似.show（）的动画之前不要删除它。

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

来源

2016-06-08 07:57:22 Mavarok

您的页面中只能使用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%'}); 
     } 
    }); 
});

默认情况下，滑块应该显示为无，右值应该是-ve。

来源

2016-06-08 08:03:30 Samir

j查询右侧滑块面板

回答

相关问题