一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery中toggle方法使用例子

时间:2014-05-12 编辑:简简单单 来源:一聚教程网

(1)toggle

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

 代码如下 复制代码

var phpersnote=document.getElementById('phpernote');
if(phpersnote.style.display=='block'){
 phpersnote.style.display='none';
}else{
 phpersnote.style.display='block';
}

var phpersnote=$('#phpernote');
if(phpersnote.is(':hidden')){
 phpersnote.show();
}else{
 phpersnote.hide();
}

$('#phpernote').toggle();

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

(2)slideToggle

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

 代码如下 复制代码

var phpersnote=$('#phpernote');
if(phpersnote.is(':hidden')){
 phpersnote.slideDown();
}else{
 phpersnote.slideUp();
}

$('#phpernote').slideToggle();

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

(3)fadeToggle

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

 代码如下 复制代码

var phpersnote=$('#phpernote');
if(phpersnote.is(':hidden')){
 phpersnote.fadeIn();
}else{
 phpersnote.fadeOut();
}

$('#phpernote').fadeToggle();

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

(4)toggleClass

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

 代码如下 复制代码

var phpersnote=$('#phpernote');
if(phpersnote.hasClass('com')){
 phpersnote.removeClass('com');
}else{
 phpersnote.addClass('com');
}

$('#phpernote').toggleClass('com');

热门栏目