当前位置： 移动技术网 > IT编程>开发语言>Jquery > jQuery --- 第四期 (jQuery动效)

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

2019年04月29日  | 移动技术网IT编程  | 我要评论

学习笔记

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网