jquery slideToggle 方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6555781/
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
jquery slideToggle direction
提问by Sanket
I am trying to slide jquery .slideToggle but i am not able to add direction left to right or right to left on click of a div (nav). Please help me out, below is my code.
我正在尝试滑动 jquery .slideToggle，但我无法在单击 div（导航）时添加从左到右或从右到左的方向。请帮帮我，下面是我的代码。
<!DOCTYPE html>
<html>
<head>
<style>
p { width:400px; float:right;background:#e4e4e4; margin:5px;padding:5px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body style="font-size:10px; color:#333;">
<div style="width:50px; height:15px;float:right;background:#ccc;border:1px solid #333;text-align:center;">Nav</div>
<p>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>
<script>
$("div").click(function () {
$("p").slideToggle("slow");
});
</script>
</body>
I am new to jquery, help much appreciated.
我是 jquery 的新手，非常感谢帮助。
回答by ragnar
You need to add a parent to the text.
您需要在文本中添加父级。
<body>
<div class="nav">Nav</div>
<div class="text">
<p>This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations!</p>
</div>
</body>
Style:
风格：
body {
font-size: 10px;
color: #333; }
.nav {
float: right;
width: 50px;
height: 30px;
text-align: center;
background: #ccc;
border: 1px solid #333; }
.text {
overflow: hidden;
float: right;
margin: 5px;
padding: 5px;
width: 400px;
background: #e4e4e4; }
And the javascript:
和 javascript：
$('.nav').click(function() {
$('.text p').css({
'width': $('.text p').width(),
'height': $('.text p').height()
});
$('.text').animate({'width': 'toggle'});
});
You have a demo at: http://jsfiddle.net/abwVd/
你有一个演示：http: //jsfiddle.net/abwVd/
回答by Amrit
The default behaviour of slideToggle in jquery is to "slide up" or "slide down". If you want your <p>to "slide left" and "slide right", you could use the 'slide' effect available in jquery ui. The direction argument accepts 'up','down','left','right' as valid values. http://docs.jquery.com/UI/Effects/Slide
jquery中slideToggle的默认行为是“向上滑动”或“向下滑动”。如果您希望<p>“向左滑动”和“向右滑动”，则可以使用 jquery ui 中提供的“滑动”效果。方向参数接受 'up'、'down'、'left'、'right' 作为有效值。http://docs.jquery.com/UI/Effects/Slide
回答by Edgar Villegas Alvarado
You could do this:
你可以这样做：
p { width:400px; position: absolute; background:#e4e4e4; margin:5px;padding:5px;}
(use position absolute instead of float right)
（使用绝对位置而不是向右浮动）
And this:
和这个：
$(document).ready(function() {
var $elem = $("p");
var docwidth = $(document).width();
var inileft = docwidth - $elem.outerWidth();
$elem.css("left", inileft); //Position element tho the right
$("div").click(function () { //This slides
$elem.animate({
left: (parseInt($elem.css("left"), 10) >= docwidth ? inileft : docwidth)
});
});
});
By using animate, you can do very custom animations. Hope this helps. Cheers
通过使用 animate，您可以制作非常自定义的动画。希望这可以帮助。干杯
回答by user2285869
<script>
$("div").click(function () {
$("p").slideToggle("slow", {direction: "left"}, 100);
});
</script>
