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>