ben*_*njo 21 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(){
$(".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>
ta-*_*run 23
您可以使用其他效果作为jQuery-ui的一部分来完成此操作
$('.show_hide').click(function () {
$(".slidingDiv").toggle("slide");
});
Ald*_*nto 14
试试这个:
$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
请试试这段代码
$(this).animate({'width': 'toggle'});
我知道已经有一年了,但是对于那些要访问此页面的人我发布了我的解决方案.
通过使用@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)
为了clearQueue和jumpToEnd.在这里阅读关于jQuery的信息