jQuery特效(一)
发表于:2024-11-26 作者:热门IT资讯网编辑
编辑最后更新 2024年11月26日,一、隐藏与显示
一、隐藏与显示
$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(1000); }); $("#show").click(function(){ $("p").show(1000); }); $("#toggle").click(function(){ $("p").toggle(500); });});div{ background: aqua; width: 50px; height: 50px; margin: 2px; float: left;}
二、淡入淡出
$(document).ready(function(){ $("#in").on("click",function(){ $("#div1").fadeIn(1000); $("#div2").fadeIn(1000); $("#div3").fadeIn(1000); }); $("#out").on("click",function(){ $("#div1").fadeOut(1000); $("#div2").fadeOut(1000); $("#div3").fadeOut(1000); }); $("#toggle").on("click",function(){ $("#div1").fadeToggle(1000); $("#div2").fadeToggle(1000); $("#div3").fadeToggle(1000); }); $("#to").on("click",function(){ $("#div1").fadeTo(1000,0.5); $("#div2").fadeTo(1000,0.7); $("#div3").fadeTo(1000,0.3); });});