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'); |