请看这个小提琴 http://jsfiddle.net/MKwwH/
我想让链接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")
});
问题是你已经设置了左右。 只需将右设置为 0 即可工作。
http://jsfiddle.net/MKwwH/4/
#imagesDiv {
background-color: yellow;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
display: none;
}
你几乎是对的:
$('#videoDiv').next().animate({width: '100%'}, "slow");
但首先你需要把宽度定为 0px;
请参阅这个工作 jsFiddle 示例。
使用它进行从右到左滑动:
<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:
.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:
$(document).ready(function(){
$('a#click-a').click(function(){
$('.nav').toggleClass('nav-view');
});
});
源文件:观看教程和下载源文件