JQuery自定义动画的函数animate( properties [, duration] [, easing] [, complete] )有四个参数。
properties：一组包含作为动画属性和终值的样式属性和及其值的集合duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing(可选)：要使用的过渡效果的名称，如："linear" 或"swing"complete(可选)：在动画完成时执行的函数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用JQuery内置的animate函数实现一个自定义简洁的弹框</title> <style type="text/css"> .update-password-box{ display: none; position: absolute; margin: auto; left: 0; right: 0; top: -42px; color: #fff; background-color: rgba(255,173,38,1); width: 250px; height: 18px; text-align: center; font-size: 13px; z-index: 9999; padding: 12px 20px; } </style> <script type="text/javascript" src="./jquery.min.js"></script> </head> <body> <div class="update-password-box"> 当前密码为弱密码，请修改为强密码！ </div> <script type="text/javascript"> $(window).load(function () { //var x = document.cookie; //console.log("x:"+x); //var NeedChangePassword = getCookie("NeedChangePassword"); var NeedChangePassword = 1; //console.log("NeedChangePassword:" + NeedChangePassword); if (NeedChangePassword != null && NeedChangePassword == "1") { /*方式一*/ //200毫秒內渐渐出现，动画执行200毫秒，完全出现且停留1500毫秒，200毫秒內渐渐消失 $(".update-password-box").fadeIn(200).animate({ top: '0px', }, 200, "swing").delay(1500).fadeOut(200); /*方式二*/ //200毫秒內渐渐出现，完全出现且停留2000毫秒，500毫秒內渐渐消失，注意需要修改top: -42px;为top: 0px //$(".update-password-box").fadeIn(200); //setTimeout(function () { // $(".update-password-box").css("cssText", "position: absolute;margin: auto;left: 0;right: 0;top: 0px;color: #fff;background-color: rgba(255,173,38,1);width: 250px; height: 18px; text-align: center;font-size: 13px;z-index: 9999;padding: 12px 20px;"); // $(".update-password-box").fadeOut(500); //}, 2000) } }) </script> </body> </html>