jquery动画（附有简单网页广告代码实例以及运行截图）_java script中的jquery脚本给一段相关代码和截图-CSDN博客

本文链接：https://blog.csdn.net/GodGump/article/details/114312684

动画的操作有很多，分享几个常见的动画
显示和隐藏
show()即显示方法和hide()即隐藏方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。
hide() 和 show() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数。speed的作用是控制显示和隐藏的速度，它可以取以下值：“slow”、“fast” 或毫秒。，callback则为执行完以后进行的函数，学过汇编语言对这个应该很好理解，返回原址。建议先写speed然后在写callback，因为我发现并不是所有版本的js都支持顺序颠倒。
补充：我们可以使用 toggle() 方法来切换 hide() 和 show() 方法。
淡入和淡出
fadeIn()方法和fadeOut()方法与show方法不相同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失(“display: none”)。fadeIn()方法则恰好相反。
补充：fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
展开和收起
slideDown()方法和slideUp()方法只改变元素的高度，slideUp()方法会在指定的一段时间内降低元素的高度，直到元素完全消失(“display: none”)slideDown()方法则恰好相反。
补充：slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
自定义动画
在jQuery中，我们可以使用animate()方法来自定义动画。
其语法格式为：

$(selector).animate({params},speed,callback);

必需的params参数定义形成动画的 CSS 属性。
可选的speed参数，callback参数和show，hide的意义一样不重复了。
停止动画：
stop() 方法用于在动画或效果完成前对它们进行停止。
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
举个广告的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .banner{
            position:relative;/*让子元素做定位*/
            display:none;
        }
        .ad_time{
            width:125px;
            height:25px;
            background-color:#000;
            color:#fff;
            position:absolute;   /*让倒计时在图片上方显示*/
            top:0;
            left:0;
            text-align:center;
            line-height:25px;
        }
        .ad_time span{
            font-weight:bold; color:#cc0; padding:0 5px;
        }
        .btn{
            width:100px;
            height:30px;
            border:1px solid #ddd;
            background-color:#eee;
            text-align:center;
            line-height:30px;
            margin:20px auto;
            cursor:pointer;
        }
    </style>
</head>
<body>
<div class="banner">
    <div>
        <a><img src="../static/BigFoot.jpg" width="1000px" height="619px"/></a>
    </div>
    <div class="ad_time">广告还剩<span id="t">6</span>秒</div>
</div>
<div class="btn">点击显示广告</div>
</body>
<script src="../static/js/jquery-3.5.1.js"></script>
<script>
    function time() {
        $t = $("#t").text();
        if ($t!=0) {
            $("#t").text($t - 1); //广告时间减 1
            $hh = setTimeout("time()", 1000); //递归，反复调用自己
        }
        else {
            $(".banner").hide();
            $(".btn").show();  //隐藏图片
            $("#t").text(6);
            clearTimeout($hh);     //清除定时间
        }
    }
    $(function () {
        $(".btn").bind("click", function () {
            $(this).hide();
            $(".banner").show();
            time();
        });
    });
</script>
</html>