//改的是行内样式 height //动画路线是从上到下 $(".slideDown").click(function () { $("div").slideDown(); }) $(".slideUp").click(function () { $("div").slideUp(); }) $(".slideToggle").click(function () { // $("div").stop().slideToggle(3000);删除所有排队的动画 在最后一次动画基础上 继续新动画 // $("div").finish().slideToggle(3000);删除所有排队的动画 完成所有动画，开始新动画 })
//淡入淡出 改的是行内样式 opacity 0<-->1 $(".fadeIn").click(function () { $("div").fadeIn(); }) $(".fadeOut").click(function () { $("div").fadeOut(); }) $(".fadeToggle").click(function () { $("div").fadeToggle(); }) $(".fadeTo").click(function () { $("div").fadeTo("normal",0.3); })
//自定义动画 // animate(params,[speed],[easing],[fn]) 的四个值 // 1.对象，里面穿需要动画的样式 // 2.speed执行动画时间 // 3.执行动画效果 // 4.回调函数 $(".animate").click(function () { // $("div").animate({width:"400px"},1000); // $("div").animate({width:"400px",height:"400px",opacity:0.3},1000); $("div").animate({width:"+=40px",height:"+=40px",opacity:0.3},1000);
}) }) </script> </head> <body> <button class="show">show</button> <button class="hide">hide</button> <button class="toggle">toggle</button> <br> <button class="slideDown">slideDown</button> <button class="slideUp">slideUp</button> <button class="slideToggle">slideToggle</button> <br> <button class="fadeIn">fadeIn</button> <button class="fadeOut">fadeOut</button> <button class="fadeToggle">fadeToggle</button> <button class="fadeTo">fadeTo(0.3)</button> <br> <button class="animate">animate</button> <div></div> </body> </html>