slideToggle JQuery从右到左

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

这是代码

  $(document).ready(function(){ $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(".slidingDiv").slideToggle(); }); });   .slidingDiv { height:300px; background-color: #99CCFF; padding:20px; margin-top:10px; border-bottom:5px solid #3399FF; } .show_hide { display:none; }    
 Fill this space with really interesting content. hide
 Show/hide 

Answer 1

您可以使用其他效果作为jQuery-ui的一部分来完成此操作

 $('.show_hide').click(function () { $(".slidingDiv").toggle("slide"); }); 

测试链接

Answer 2

试试这个：

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

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

Answer 3

我知道已经有一年了，但是对于那些要访问这个页面的人我只是发布我的解决方案。

通过使用@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) 

为了清除Queue和jumpToEnd。 在这里阅读关于jQuery的信息

Answer 4

请试试这段代码

 $(this).animate({'width': 'toggle'}); 

Answer 5

试试这个

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

Answer 6

 $("#mydiv").toggle(500,"swing"); 

Answer 7

包括Jquery和Jquery UI插件并试试这个

  $("#LeftSidePane").toggle('slide','left',400); 

Answer 8

我建议你使用下面的CSS

 .showhideoverlay { width: 100%; height: 100%; right: 0px; top: 0px; position: fixed; background: #000; opacity: 0.75; } 

然后，您可以使用简单的切换function：

 $('a.open').click(function() { $('div.showhideoverlay').toggle("slow"); }); 

这将从右到左显示叠加菜单。 或者，您可以使用定位从顶部或底部更改效果，即使用bottom: 0; 而不是top: 0; – 你会看到从右下角滑动的菜单。