slideToggle JQuery 从右到左
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17271169/
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
slideToggle JQuery right to left
提问by benjo
i'm new in JQ i have this script i found on the internet and its do exactly what i need but i want the sliding will be from the right to the left how can i do it? please help
我是 JQ 的新手，我在互联网上找到了这个脚本，它完全符合我的需求，但我希望从右向左滑动，我该怎么做？请帮忙
this is the code
这是代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<style>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>
</head>
<body>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>
<a href="#" class="show_hide">Show/hide</a>
回答by pai.not.pi
You can do this using additional effects as a part of jQuery-ui
您可以使用附加效果作为 jQuery-ui 的一部分来执行此操作
$('.show_hide').click(function () {
$(".slidingDiv").toggle("slide");
});
回答by Aldi Unanto
Try this:
尝试这个：
$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
回答by w3debugger
Please try this code
请试试这个代码
$(this).animate({'width': 'toggle'});
回答by Spyros
I know it's been a year since this was asked, but just for people that are going to visit this page I am posting my solution.
我知道自从被问到这个问题已经一年了，但只是为了那些要访问这个页面的人，我发布了我的解决方案。
By using what @Aldi Unanto suggested here is a more complete answer:
通过使用@Aldi Unanto 在这里建议的是一个更完整的答案：
jQuery('.show_hide').click(function(e) {
e.preventDefault();
if (jQuery('.slidingDiv').is(":visible") ) {
jQuery('.slidingDiv').stop(true,true).hide("slide", { direction: "left" }, 200);
} else {
jQuery('.slidingDiv').stop(true,true).show("slide", { direction: "left" }, 200);
}
});
First I prevent the link from doing anything on click. Then I add a check if the element is visible or not. When visible I hide it. When hidden I show it. You can change direction to left or right and duration from 200 ms to anything you like.
首先，我阻止链接在单击时执行任何操作。然后我添加一个检查元素是否可见。当可见时，我将其隐藏。隐藏时我显示它。您可以将方向更改为向左或向右，并将持续时间从 200 毫秒更改为您喜欢的任何值。
Edit: I have also added
编辑：我也添加了
.stop(true,true)
in order to clearQueue and jumpToEnd. Read about jQuery stop here
为了clearQueue和jumpToEnd。在此处阅读有关 jQuery 的信息
回答by AlexanderPop
$("#mydiv").toggle(500,"swing");
more https://api.jquery.com/toggle/
回答by Souvik
Try this
尝试这个
$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);
回答by piyush singh
I would suggest you use the below css
我建议你使用下面的css
.showhideoverlay {
width: 100%;
height: 100%;
right: 0px;
top: 0px;
position: fixed;
background: #000;
opacity: 0.75;
}
You can then use a simple toggle function:
然后您可以使用一个简单的切换功能：
$('a.open').click(function() {
$('div.showhideoverlay').toggle("slow");
});
This will display the overlay menu from right to left. Alternatively, you can use the positioning for changing the effect from top or bottom, i.e. use bottom: 0;instead of top: 0;- you will see menu sliding from right-bottom corner.
这将从右到左显示覆盖菜单。或者，您可以使用定位从顶部或底部更改效果，即使用bottom: 0;代替top: 0;- 您将看到菜单从右下角滑动。
回答by Anbu
include Jquery and Jquery UI plugins and try this
包括 Jquery 和 Jquery UI 插件并试试这个
$("#LeftSidePane").toggle('slide','left',400);
回答by Ajmal Naha
You can try this:
你可以试试这个：
$('.show_hide').click(function () {
$(".slidingDiv").toggle("'slide', {direction: 'right' }, 1000");
});
