当前位置: 编程技术>jquery
jquery中toggle与slideToggle的区别
来源: 互联网 发布时间：2014-09-03
本文导语: 在jQuery中toggle与slideToggle方法，都可以实现对一个元素的显示和隐藏。 toggle与slideToggle的区别： toggle：动态效果为从右至左。横向动作。 slideToggle：动态效果从下至上。竖向动作。 比如实现一个树由下至上收缩的动态效果，使...
在jQuery中toggle与slideToggle方法，都可以实现对一个元素的显示和隐藏。
toggle与slideToggle的区别：
toggle：动态效果为从右至左。横向动作。
slideToggle：动态效果从下至上。竖向动作。
比如实现一个树由下至上收缩的动态效果，使用slideToggle即可。
此外，toggle和slideToggle 还有一些参数可以设置，具体看jQuery的API吧。
例1，toggle的用法：
代码示例:
$(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);
}
);
});
})
例2，slideToggle的用法：
代码示例:
slideToggle_www.
.imgclass
{
width: 300px;
height: 300px;
border: solid 1px red;
}
$(function () {
$('#Button1').bind('click', function () {
$('img').slideUp(2000);
});
$('#Button2').bind('click', function () {
$('img').slideDown(2000);
});
$('#Button3').bind('click', function () {
$('img').slideToggle(2000);
})
})
.imgclass
{
width: 300px;
height: 300px;
border: solid 1px red;
}
$(function () {
$('#Button1').bind('click', function () {
$('img').slideUp(2000);
});
$('#Button2').bind('click', function () {
$('img').slideDown(2000);
});
$('#Button3').bind('click', function () {
$('img').slideToggle(2000);
})
})
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。