使用JQuery内置的animate函数实现一个自定义简洁的弹框

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>

使用JQuery内置的animate函数实现一个自定义简洁的弹框

猜你喜欢