javascript 从屏幕外滑入一个 div，然后重新打开切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21416282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slide a div in from off screen and then back on toggle
提问by user3158473
I am trying to move a div in from off screen and then back on toggle
我正在尝试从屏幕外移动一个 div，然后重新打开切换
$('a.show').on('click',function() {
if($('#left-navi-designers').css('left')=='0px'){
$('#left-navi-designers').animate({left: '-100%'}, 1000);
}else{
$('#left-navi-designers').animate({left:0}, 1000);
}
});
That is what i have for the JavaScript. I have this for my CSS:
这就是我对 JavaScript 的看法。我的 CSS 有这个：
#left-navi-designers {
height: 100%;
position: fixed;
background: #fff;
width: 100%;
left: -100%;
}
This is my HTML:
这是我的 HTML：
<div id="left-icons"><a class="show" style="color:#999;">DUH!</a></div>
<div id="left-navi-designers">
<div id="topNavigation">
<ul class="topLevelNavigation">
<a href=".topLevelNavigation" class="button"><li>DESIGNERS</li></a>
<a href=".topLevelNavigation2" class="button"><li>EMERGING</li></a>
<a href=".topLevelNavigation3" class="button"><li>STUDIOS</li></a>
<a href=".topLevelNavigation4" class="button"><li>NEW FACES</li></a>
<a href=".topLevelNavigation5" class="button"><li>EDITORS</li></a>
<a href="#box1" class="button"><li>MEDIA KIT</li></a>
<a href="#box1" class="button"><li>BEAUTY</li></a>
<a href="#box1" class="button"><li>BRANDS</li></a>
<a href="#box1" class="button"><li>MODELS</li></a>
<a href="#box1" class="button"><li>PARTIES</li></a>
</ul></div>
I'm very new to this and am just trying to get some things figured out. Here is the site i am playing on http://keithfrenchdesigns.com/RunwayMag/designers_main.html
我对此很陌生，只是想弄清楚一些事情。这是我在http://keithfrenchdesigns.com/RunwayMag/designers_main.html 上玩的网站
Thanks in advance!
提前致谢！
回答by kasper Taeymans
you also can toggle your div with a css transition. This is more quick because you only have to toggle a class. See my example jsfiddle to see what I mean.
您还可以使用 css 转换来切换 div。这更快，因为您只需要切换一个类。请参阅我的示例 jsfiddle 以了解我的意思。
jquery
查询
$('button').on('click', function(){
$('#slider').toggleClass('open');
})
css
css
#slider{
background:blue;
height:100px;
width:500px;
position:relative;
left:-520px;
}
.open{
left:0px !important;
}
.transition{
-webkit-transition: left 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: left 0.3s ease-out; /* Firefox 4-15 */
-o-transition: left 0.3s ease-out; /* Opera 10.50–12.00 */
transition: left 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
html
html
<button>slide</button>
<div id="slider" class="transition"></div>
回答by Irvin Dominin
Your code works and I see you have included jQuery UI, so instead using animateand negative left, you can use visibility and togglewith animation:
您的代码有效，我看到您已包含 jQuery UI，因此您可以使用可见性和动画来代替使用animate和否定：lefttoggle
Display or hide the matched elements.
显示或隐藏匹配的元素。
Code:
代码：
$('a.show').on('click', function () {
$('#left-navi-designers').toggle("slide", { direction: "left" }, 1000);
});
回答by JiFus
You can use this functions.
您可以使用这些功能。
function SlideIn(el){
var elem = document.getElementById(el);
elem.style.transition = "left 1.5s linear 0s";
elem.style.left = "10px";
}
function SlideOut(el){
var elem = document.getElementById(el);
elem.style.transition = "left 1.5s linear 0s";
elem.style.left = "-200px";
}
// Use this buttons, for example.
<button onclick="SlideIn('box1')">Slide in</button>
<button onclick="SlideOut('box1')">Slide out</button>
<div id="box1">Put something in here</div>
This is just an example, try it at your own boxes.
这只是一个例子，在你自己的盒子上试试。
回答by DaniP
I have tried your code like here http://jsfiddle.net/wm3c4/. And it works just fine the only problem I see is in your page you have this:
我已经尝试过像这里http://jsfiddle.net/wm3c4/这样的代码。它工作得很好，我看到的唯一问题是在你的页面中你有这个：
$('a.show').on('click',function() {
if($('#website').css('left')=='0px'){
$('#website').animate({left: '-100%'}, 1000);
}else{
$('#website').animate({left:0}, 1000);
}
});
But there is no element with id="website". Try to change that selector to the one you post here.
但是没有带有 的元素id="website"。尝试将该选择器更改为您在此处发布的选择器。
