「jQuery」动画&动效学习和练习延时执行淡入淡出动画

我是一只虫子 2020-06-18 10:09:16

165

原力计划

分类专栏：前端文章标签： jquery css html

本文链接：https://blog.csdn.net/imabug/article/details/106824253

版权

jQuery动画

show([speed,[easing],[fn]])

显示隐藏的匹配元素。

hide([speed,[easing],[fn]])

隐藏显示的元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq显示隐藏-乔越博客</title>
    <!-- 引入jquery库 -->
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 200px;
            height: 200px;
            background: red;
            display: none;
        }
    </style>

    <script>

        $(function(){

            $("button").eq(0).click(function(){
                // $("div").css("display","block");
                $("div").show(1000);
            })
            $("button").eq(1).click(function(){
                // $("div").css("display","none");
                $("div").hide(1000);
            })
            $("button").eq(2).click(function(){
                $("div").toggle(1000);
            })  

        })
    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>
</html>

scroll([[data],fn]) 监听网页滚轮

当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

$(window).scroll( function() { /* ...do something... */ } );

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R7WPgWD7-1592445650015)(/Users/qiaoyue/Downloads/2.gif)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对联广告-乔越博客</title>
    <!-- 引入jquery库 -->
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 250px;
            height: 400px;
            display: none;
        }
        .left{
            float: left;
            position: fixed;
            left: 0;
            top: 200px;
        }
        
        .right{
            float: right;
            position: fixed;
            right: 0;
            top: 200px;
        }
    </style>
    <script>
        $(function(){
            $(window).scroll(function(){
               var offset =  $("html,body").scrollTop();
               if(offset >= 500){
                    $("img").show(1000);
               }else{
                    $("img").hide(1000);
               }
            })
        })
    </script>
</head>
<body>
    <img class="left" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592379021&di=288d03442624777f9bef0bab14fbe62e&src=http://d.hiphotos.baidu.com/zhidao/pic/item/738b4710b912c8fc40cc855efc039245d6882161.jpg" alt="">
    <img class="right" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592389104341&di=84f707ab996b60cfbda20ee4da048669&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201305%2F12%2F20130512095153_WSu5Q.jpeg" alt="">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p>乔越博客</p>
</body>
</html>

slideDown([speed],[easing],[fn])

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

$(".btn2").click(function(){
  $("p").slideDown("时间｜方法");
});

slideUp([speed,[easing],[fn]])

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。

$("p").slideUp("时间｜方法");

slideToggle([speed],[easing],[fn])

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

$("p").slideToggle("时间｜方法");

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展开收起-乔越博客</title>
    <!-- 引入jquery库 -->
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            height: 400px;
            width: 100px;
            background: red;
        }
    </style>

    <script>

        $(function(){
            $("button").eq(0).click(function(){
                $("div").slideDown(1000)
            })
            $("button").eq(1).click(function(){
                $("div").slideUp(1000)
            })
            $("button").eq(2).click(function(){
                $("div").slideToggle(1000)
            })

        })
    </script>
</head>
<body>

    <button>展开</button>
    <button>收起</button>
    <button>切换</button>

    <div></div>

    
</body>
</html>

stop([clearQueue],[jumpToEnd])

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行。

$("#stop").click(function(){
  $("#box").stop();
});

在jQuery中如果需要执行动画,建议在执行动画之前先调用 stop 方法然后在执行动画.

淡入淡出

fadeIn([speed],[easing],[fn])

淡入

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

$("元素").fadeIn("时间"); //淡入

fadeOut([speed],[easing],[fn])

淡出

$("元素").fadeOut("时间");//淡出

fadeToggle([speed,[easing],[fn]])

淡入或淡出

$("元素").fadeToggle("时间","效果");

fadeTo([[speed],opacity,[easing],[fn]])

调整透明度

$("元素").fadeTo("slow", 0.66);
// 时间 透明度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GBOjb07H-1592445650017)(/Users/qiaoyue/Downloads/5.gif)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淡入淡出-乔越博客</title>
    <!-- 引入jquery库 -->
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
        
    <style>
        div{
            width: 200px;
            height: 400px;
            background: red;

        }
    </style>
    <script>

        $(function(){

            $("button").eq(0).click(function(){
                // 淡入
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function(){
                // 淡出
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function(){
                // 调整透明度
                $("div").fadeTo(1000,0.5,function(){
                });
            })
            $("button").eq(3).click(function(){
                // 切换
                $("div").fadeToggle(1000);
            })
            
        })


    </script>
</head>
<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>淡入到</button>

    <div>

    </div>
</body>
</html>

自定义动画

animate(params,[speed],[easing],[fn])

参数

params：一组包含作为动画属性和终值的样式属性和及其值的集合
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing：要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
fn：在动画完成时执行的函数，每个元素执行一次。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8eGP9DXm-1592445650017)(/Users/qiaoyue/Downloads/6.gif)]

<!--html-->
<button id="go"> Run</button>
<div id="block">Hello!</div>

//jquery
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

delay(时间,[队列])

设置一个延时来推迟执行队列中之后的项目。

$('元素').slideUp(300).delay(800).fadeIn(400);
//1. 当slideUp动画执行完毕后
//2. 等待800毫秒后   （简单的说就是前面的执行完需要等会在执行下一个）
//3. 执行fadeIn动画

原文地址：https://www.79bk.cn/archives/1972

点赞
评论
分享
x
海报分享

扫一扫，分享海报
收藏 1
打赏

打赏

我是一只虫子

你的鼓励将是我创作的最大动力

C币余额

2C币 4C币 6C币 10C币 20C币 50C币

确定
举报
关注关注
一键三连
点赞Mark关注该博主, 随时了解TA的最新博文

已标记关键词清除标记

插入表情

还能输入1000个字符