jquery toggle类方法的总结

PHPABC JQuery 1,004 次浏览 , 没有评论

jquery的出现让web开发的工作变得更加简单快速。以前需要写一堆js代码的地方,用jquery几句代码就over了。下面作者就用jquery的toggle方法快速实现工作中几种常见的js效果。仅列举示例说明,也算是对jquery toggle类的方法的一个小总结。

(1)toggle

隐藏显示的切换效果应该是比较常见的。这个效果有多种实现方法,如下:

var phpabccn=document.getElementById('phpabc');
if(phpabccn.style.display=='block'){
 phpabccn.style.display='none';
}else{
 phpabccn.style.display='block';
}
 
var phpabccn=$('#phpabc');
if(phpabccn.is(':hidden')){
 phpabccn.show();
}else{
 phpabccn.hide();
}
 
$('#phpabc').toggle();

对于以上的show hide toggle方法都有一些参数可以调用从而实现一些动画效果,这里就不说明了。

(2)slideToggle

这个是向下拉或者向上收起的效果,实现方法:

var phpabccn=$('#phpabc');
if(phpabccn.is(':hidden')){
 phpabccn.slideDown();
}else{
 phpabccn.slideUp();
}
 
$('#phpabc').slideToggle();

slideDown slideUp slideToggle 都有相应的参数实现用户体验较好的动画效果。

(3)fadeToggle

对div进行淡入显示淡出隐藏的效果:

var phpabccn=$('#phpabc');
if(phpabccn.is(':hidden')){
 phpabccn.fadeIn();
}else{
 phpabccn.fadeOut();
}
 
$('#phpabc').fadeToggle();

fadeIn fadeOut fadeToggle 都有相应的参数实现用户体验较好的动画效果。

(4)toggleClass

对某个对象添加或者去除class操作:

var phpabccn=$('#phpabc');
if(phpabccn.hasClass('com')){
 phpabccn.removeClass('com');
}else{
 phpabccn.addClass('com');
}
 
$('#phpabc').toggleClass('com');

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go