<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画</title> <script src="../js/jquery-3.3.1.js"></script> <script> function f1(){ //三套动画效果 slideDown,show,fadeIn $("img").fadeIn(3000,function(){ alert("ok")//3秒后结束动画，结束后调用此函数 }); } function f2(){//slideUp可换成hide,fadeOut $("img").fadeOut(3000,function(){ alert("ok"); }); } function f3(){ //500毫秒显示。后3000毫秒后消失 $("p:last").fadeIn(500).fadeOut(3000); } </script> </head> <body> <p> <input type="button" value="显示" οnclick="f1();"/> <input type="button" value="隐藏" οnclick="f2();"/> <input type="button" value="删除" οnclick="f3();"/> </p> <p> <img src="../images/1.jpg"/> </p> <p style="display:none;">操作成功!</p> </body> </html>
