/*
//基本
show([s,[e],[fn]]) 显示元素
hide([s,[e],[fn]]) 隐藏元素
//滑动
slideDown([s],[e],[fn]) 向下滑动
slideUp([s,[e],[fn]]) 向上滑动
//淡入淡出
fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],opacity,[e],[fn]]) 让元素的透明度调整到指定数值
//自定义
animate(p,[s],[e],[fn]) 自定义动画
stop([c],[j]) 暂停上一个动画效果,开始当前触发的动画效果
*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <style> .box{ width: 250px; height: 250px; background-color: #000; position: fixed; top: 50px; left: 10px; } </style> </head> <body> <button class="show">显示[入场]</button> <button class="hide">隐藏[出场]</button> <button class="fidein">淡入[入场]</button> <button class="fideout">淡出[出场]</button> <button class="slidedown">向下滑动[入场]</button> <button class="slideup">向上滑动[出场]</button> <button class="animate">自定义动画</button> <div class="box"></div> <script> $(".show").on("click", function(){ $(".box").show(1000); // 参数1: 时间,单位毫秒 参数2: 执行效果完成以后的回调函数 }); $(".hide").on("click", function(){ $(".box").hide(1000, function(){ alert("找不到我了吧~"); }); }); $(".fidein").on("click", function(){ $(".box").fadeIn(1000); }); $(".fideout").on("click", function(){ $(".box").fadeOut(1000); }); $(".slidedown").on("click", function(){ $(".box").slideDown(1000); }); $(".slideup").on("click", function(){ $(".box").slideUp(1000); }); // 自定义动画 $(".animate").on("click",function(){ // $(".box").animate(动画最终效果,动画完成的时间,动画完成以后的回调函数) $(".box").animate({ "border-radius":"50%", "left": "120px", "top": "200px", },2000,function(){ $(".box").animate({ "border-radius":"0%", "left": "10px", "top": "50px", },1000,function(){ // $(‘.animate‘).trigger("click"); }); }); }); </script> </body> </html>
原文：https://www.cnblogs.com/zhangyh-blog/p/14756565.html