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
您可以使用其他效果作为jQuery-ui的一部分来完成此操作
$('.show_hide').click(function () { $(".slidingDiv").toggle("slide"); });
测试链接
试试这个:
$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { 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)
为了清除Queue和jumpToEnd。 在这里阅读关于jQuery的信息
请试试这段代码
$(this).animate({'width': 'toggle'});
试试这个
$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);
$("#mydiv").toggle(500,"swing");
包括Jquery和Jquery UI插件并试试这个
$("#LeftSidePane").toggle('slide','left',400);
我建议你使用下面的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;
– 你会看到从右下角滑动的菜单。