jquery toggle类方法用法
jquery的toggle方法快速实现几种常见的js效果。
jquery toggle类的方法总结。
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');