jQuery --- 第四期 (jQuery动效)

来源：cnblogs　　作者：CN丶Moti　　时间：2019/4/29 10:19:29　　对本文有异议

学习笔记

1.jQuery动画的淡入淡出

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery动画的淡入淡出</title>
<style>
    body{background-color: #EBEBEB}
    div{
        width :200px;
        height :200px;
        background-color :red;
        display :none;
    }
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //动画淡入
        $("button").eq(0).click(function(){
            $("div").eq(0).fadeIn(2000,function(){
            });
        });
        //动画淡出
        $("button").eq(1).click(function(){
            $("div").eq(0).fadeOut(2000,function(){
            });
        });
        //淡出入切换
        $("button").eq(2).click(function(){
            $("div").eq(0).fadeToggle(2000,function(){
            })
        });
        //允许渐变为指定的不透明度（0-1）
         $("button").eq(3).click(function(){
            $("div").eq(0).fadeTo(2000,0.5,function(){
            })
        });
    });
</script>
</head>
 
<body>
    <button>fadeIn</button>
    <button>fadeOut</button>
    <button>fadeToggle</button>
    <button>fadeTo</button>
    <div></div>
</body>
</html>

2.jQuery广告弹窗

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery弹窗广告</title>
<!--适应移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css样式-->
<style>
    body{background-color: #EBEBEB}
    div{
        width :200px;
        height :200px;
        background-color :red;
        position :fixed;
        right :0;
        bottom :0;
        display:none;
    }
    .span{
        width:40px;
        height:20px;
        position:absolute;
        background-color:green;
        right:0;
        top:0;
    }
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //监听关闭span
       $(".span").click(function(){
           $("div").fadeOut(1000);
       });
       //按照动画队列依次执行
       $("div").stop().slideDown(1000).fadeOut(500).fadeIn(1000);
    });
</script>
</head>
 
<body>
    <div>
        <span class="span">关闭</span>
    </div>
</body>
</html>

原文链接：http://www.cnblogs.com/cnmoti/p/10788372.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章