从右向左滑动切换JQuery_Jquery_Toggle_Right To Left

从右向左滑动切换JQuery

jquery

从右向左滑动切换JQuery,jquery,toggle,right-to-left,Jquery,Toggle,Right To Left,我是JQ的新手我在互联网上找到了这个脚本，它完全符合我的需要但我希望滑动方向是从右向左我怎么做？请帮忙这是密码 <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(){

我是JQ的新手我在互联网上找到了这个脚本，它完全符合我的需要但我希望滑动方向是从右向左我怎么做？请帮忙

这是密码

<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>


$（文档）.ready（函数（）{
$（“.slidingDiv”）.hide（）；
$（“.show_hide”）.show（）；
$（'.show_hide'）。单击（函数（）{
$（“.slidingDiv”）.slideToggle（）；
});
});
.slidingDiv{
高度：300px；
背景色：#99CCFF；
填充：20px；
边缘顶部：10px；
边框底部：5px实心#3399FF；
}
.显示隐藏{
显示：无；
}
用真正有趣的内容填满这个空间。

试试这个：

$(this).hide("slide", { direction: "left" }, 1000);

$（this）.show（“幻灯片”{direction:“left”}，1000）
您可以使用
我知道这一问题已经问了一年了，但我只是为那些要访问此页面的人发布了我的解决方案
通过使用@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);
    }
  });

首先，我阻止链接在单击时执行任何操作。
然后，我添加一个检查元素是否可见。
当我看见它时，我就把它藏起来。当我把它藏起来时，我会把它展示出来。
您可以将方向更改为向左或向右，持续时间从200毫秒更改为您喜欢的任何时间
编辑：
我还补充说
.stop(true,true)

以清除队列和跳转结束
 请尝试此代码
$(this).animate({'width': 'toggle'});

包括Jquery和jQueryUI插件并尝试以下操作
 $("#LeftSidePane").toggle('slide','left',400);

试试这个
$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);

我建议您使用下面的css
.showhideoverlay { 
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  position: fixed;
  background: #000;
  opacity: 0.75;
}

然后，您可以使用一个简单的切换功能：
$('a.open').click(function() {
  $('div.showhideoverlay').toggle("slow");
});

这将从右向左显示覆盖菜单。或者，您可以使用定位从顶部或底部更改效果，即使用bottom:0而不是顶部：0-您将看到菜单从右下角滑动。
您可以尝试以下操作：
$("#mydiv").toggle(500,"swing");

more https://api.jquery.com/toggle/

$('.show_hide').click(function () {
    $(".slidingDiv").toggle("'slide', {direction: 'right' }, 1000");
});


我挣扎于toggle（'slide'）
和slideToggle
hours
我得到的结论是：

切换（'slide'）
只能从右向左隐藏元素，这意味着从左向右显示元素

slideToggle
只能从下到上隐藏元素
，这意味着从上到下显示元素

如果要自由定义收缩方向，必须使用jqueryui

例如：
$element.toggle（'slide'，{direction:'left/right/up/down'}，1000）
或者您可以阅读这篇很棒的教程：这需要jQuery UI这一点，再加上方向选项，是最好的答案。除非您使用jQuery UI，否则这段代码不会起任何作用。您得到的所有默认选项都是“慢”和“快”。此外，此代码将抛出语法错误，因为animate
参数应作为对象传递（您缺少{}）。如果在代码中包含解释，这将是一个更好的答案。请为此代码段添加更多说明，这可能会提供一些有限的、即时的帮助。通过展示为什么这是一个很好的问题解决方案，A将极大地提高它的长期价值，并将使它对未来有其他类似问题的读者更有用。请在您的回答中添加一些解释，包括您所做的假设。
$('.show_hide').click(function () {
    $(".slidingDiv").toggle("'slide', {direction: 'right' }, 1000");
});