浅析jquery中的toggle与slideToggle的区别
- 巴扎黑原创
- 2017-06-30 11:16:531483浏览
jQuery中的
toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。强大啊~
区别是：
toggle：动态效果为从右至左。横向动作。
slideToggle：动态效果从下至上。竖向动作。
so，比如想实现一个树由下至上收缩的动态效果，就使用slideToggle就ok了。
此外，toggle和slideToggle 还有一些参数可以设置，具体看jQuery的API就可以了~
toggle的用法：
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></SCRIPT>
<SCRIPT LANGUAGE="
JavaScript
">
$(function(){
$("#z").toggle(
function(){
alert(1);
},
function(){
alert(2);
},
function(){
alert(3);
}
);
$("#x").click(function(){
$("#z").toggle(
function(){
alert(1);
},
function(){
alert(2);
},
function(){
alert(3);
}
);
});
})
</SCRIPT>
<p style="
width
:100px;
height
:100px;
background-color
:red;" id="z"></p>
<p style="width:100px; height:100px; background-color:blue;" id="x"></p>
slideToggle的用法：
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
.imgclass
{
width: 300px;
height: 300px;
border: solid 1px red;
}
</style>
<script type="text/javascript">
$(function () {
$('#Button1').bind('click', function () {
$('img').slideUp(2000);
});
$('#Button2').bind('click', function () {
$('img').slideDown(2000);
});
$('#Button3').bind('click', function () {
$('img').slideToggle(2000);
})
})
</script>
</head>
<body>
<p>
<p>
<input id="Button1" type="button" value="上拉" /><input id="Button2" type="button"
value="下拉" /><input id="Button3" type="button" value="自动上拉下拉" /></p>
<p>
<img alt="" src="images/1.jpg" class="imgclass" /></p>
</p>
</body>以上是浅析jquery中的toggle与slideToggle的区别的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn