jQuery 如何让div从右向左滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15658858/
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 make div slide from right to left
提问by Francis Alvin Tan
got a code here from someone....
从某人那里得到了一个代码......
what I like is to make the sliding div from right slide to left, i mean it hides the div to the right and slowly slides to the left for 300px width.
我喜欢的是让滑动 div 从右滑到左，我的意思是它隐藏了右边的 div 并慢慢地向左滑动 300px 宽度。
HTML
HTML
<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>
CSS
CSS
#loginPanel {
color: #000;
cursor:pointer;
}
#userNav {
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
Jquery
查询
// Open / Close Panel According to Cookie //
if ($.cookie('panel') == 'open'){
$('#userNav').slideDown('fast');
} else {
$('#userNav').slideUp('fast');
}
// Toggle Panel and Set Cookie //
$('#loginPanel').click(function(){
$('#userNav').slideToggle('fast', function(){
if ($(this).is(':hidden')) {
$.cookie('panel', 'closed');
} else {
$.cookie('panel', 'open');
}
});
});
Please need help on this one. just to make the div slide right to left
请在这方面需要帮助。只是为了使 div 从右向左滑动
here is the fiddle http://jsfiddle.net/7m7uK/195/
回答by freshbm
You can use jQueryUI and additional effects Slide
您可以使用 jQueryUI 和附加效果Slide
http://docs.jquery.com/UI/Effects/Slide
http://docs.jquery.com/UI/Effects/Slide
Example:
例子：
$('#userNav').hide("slide", {direction: "left" }, 1000);
$('#userNav').show("slide", { direction: "right" }, 1000);
You can't use .slideToggle() to slide from left to right or vice versa, from http://api.jquery.com/slideToggle/:
您不能使用 .slideToggle() 从左向右滑动，反之亦然，来自http://api.jquery.com/slideToggle/：
The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
.slideToggle() 方法为匹配元素的高度设置动画。这会导致页面的下部向上或向下滑动，以显示或隐藏项目。如果元素最初显示，它将被隐藏；如果隐藏，它将显示出来。
You should try and change your code to implement this code, but I think it's maybe better if you try with @s15199danswer, than you don't need to use jQueryUI
您应该尝试更改您的代码以实现此代码，但我认为如果您尝试使用@s15199d答案可能比您不需要使用 jQueryUI 更好
Ok, I created jsfiddle, you must include jQueryUI in order to work, you have different combinations of slide directions:
好的，我创建了 jsfiddle，你必须包含 jQueryUI 才能工作，你有不同的滑动方向组合：
http://jsfiddle.net/7m7uK/197/
http://jsfiddle.net/7m7uK/197/
Ok, created another fiddle with cookies
好的，用 cookie 创建了另一个小提琴
回答by Gingi
Without depending on JQuery-UI
不依赖于 JQuery-UI
You need to place the content <div>you mean to slide inside a wrapper <div>. You then set the right margin of the content div to its negative width. The trick with the wrapper <div>is to have its x-overflowset to hidden so that it hides the content <div>. You can then use jQuery's native animate()routine to set the right margin to 0 to make the content <div>appear with a horizontal sliding effect.
您需要将<div>要滑动的内容放入包装器中<div>。然后将内容 div 的右边距设置为其负宽度。包装器的诀窍<div>是将其x-overflow设置为 hidden 以便隐藏内容<div>。然后就可以使用 jQuery 的原生animate()例程将右边距设置为 0，使内容<div>呈现水平滑动效果。
HTML:
HTML：
<div id="slider-wrapper">
<div id="slider-content">
</div>
CSS:
CSS：
#slider-wrapper {
overflow-x: hidden;
}
#slider-content {
width: 300px;
margin-right: -300px;
}
JavaScript:
JavaScript：
$("#slider-button").click(function () {
$("#slider-content").animate({ "margin-right": 0 }, "slow");
});
Here's a demo that uses a handle <div>to expand and collapse a div:
http://jsfiddle.net/gingi/KUCaL/
这是一个使用句柄<div>展开和折叠 div的演示：http:
//jsfiddle.net/gingi/KUCaL/
回答by Sharavnan Kv
SLIDE DIV FROM RIGHT TO LEFT AND LEFT TO RIGHT
从右到左和从左到右滑动 DIV
<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*/
.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');
});
});
http://www.themeswild.com/read/slide-navigation-left-to-right
http://www.themeswild.com/read/slide-navigation-left-to-right
回答by s15199d
$("#DivName").animate({"left": "-=300px", "opacity":1}, "slow");
回答by Djouuuuh
Have you tried this ?
你试过这个吗？
if ($.cookie('panel') == 'open'){
$('#userNav').slideLeft('fast');
} else {
$('#userNav').slideRight('fast');
}
