[英]Slide a div in from off screen and then back on toggle
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. 这就是我对JavaScript的看法。 I have this for my CSS:
我的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! 提前致谢!
you also can toggle your div with a css transition. 你也可以用css过渡来切换你的div。 This is more quick because you only have to toggle a class.
这更快,因为您只需要切换一个类。 See my example jsfiddle to see what I mean.
看看我的例子jsfiddle,看看我的意思。
http://jsfiddle.net/8Wkgf/1/ http://jsfiddle.net/8Wkgf/1/
jquery 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>
Your code works and I see you have included jQuery UI, so instead using animate
and negative left
, you can use visibility and toggle
with animation: 您的代码有效,我发现您已经包含了jQuery UI,因此使用
animate
和负left
,您可以使用可见性并使用动画toggle
:
Display or hide the matched elements.
显示或隐藏匹配的元素。
Code: 码:
$('a.show').on('click', function () {
$('#left-navi-designers').toggle("slide", { direction: "left" }, 1000);
});
Demo: http://jsfiddle.net/IrvinDominin/r7m3C/ 演示: http : //jsfiddle.net/IrvinDominin/r7m3C/
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. 这只是一个例子,可以在自己的盒子里试试。
I have tried your code like here http://jsfiddle.net/wm3c4/ . 我在这里试过你的代码http://jsfiddle.net/wm3c4/ 。 And it works just fine the only problem I see is in your page you have this:
它可以正常工作我看到的唯一问题是你的页面中有这个问题:
$('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"
. 但是没有
id="website"
元素。 Try to change that selector to the one you post here. 尝试将该选择器更改为您在此处发布的选择器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.