热门IT资讯网

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












0