jQuery 如何从右向左滑动切换 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19316805/
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
How to slide toggle a div right to left?
提问by angela
Please see this fiddle http://jsfiddle.net/MKwwH/
请看这个小提琴http://jsfiddle.net/MKwwH/
I want the link images-linkto slide toggle right to left?
我想要链接images-link从右向左滑动切换？
$(document).ready(function() {
$('.hidden').hide()
});
$('.soundDiv-link').click(function() {
$('#soundDiv').slideToggle("slow")
});
$('.videoDiv-link').click(function() {
$('#videoDiv').next().animate({width: 'toggle'}, "slow")
});
$('.imagesDiv-link').click(function() {
$('#imagesDiv').animate({width: 'toggle'}, "slow")
});
回答by Smeegs
The issue is that you have left and right set. Just set right to 0 and it will work.
问题是你设置了左右。只需将其设置为 0 即可。
#imagesDiv {
background-color: yellow;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
display: none;
}
回答by Vladimir
You where almost right :
你几乎是对的：
$('#videoDiv').next().animate({width: '100%'}, "slow");
But first you need to put width to a 0px;
但首先你需要将宽度设为 0px；
See this working jsFiddle example.
请参阅此有效的jsFiddle 示例。
回答by Sharavnan Kv
USE THIS FOR RIGHT TO LEFT SLIDING :
使用它向右滑动：
<div class="nav ">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
CSS:
CSS：
.nav{
position: fixed;
right:0;
top: 70px;
width: 250px;
height: calc(100vh - 70px);
background-color: #333;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.nav-view{
transform: translateX(0);
}
JS:
JS：
$(document).ready(function(){
$('a#click-a').click(function(){
$('.nav').toggleClass('nav-view');
});
});
SOURCE FILES: WATCH TUTORIAL AND DOWNLOAD SOURCE
源文件：观看教程和下载源
