jQuery显示隐藏效果、滑动效果、淡入淡出效果、animate

最新推荐文章于 2021-07-30 17:57:18 发布

我是Dreamer啊

最新推荐文章于 2021-07-30 17:57:18 发布

阅读量566

点赞数

分类专栏：前端开发文章标签： jquery css js html javascript

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/112261233

版权

前端开发专栏收录该内容

57 篇文章 6 订阅

订阅专栏

jQuery效果

显示隐藏效果

show()、hide()、toggle()

show()显示效果

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

参数可以全部省略，无动画直接显示。

speed：三种预定速度（“slow”,“normal”,“fast”）或者表示动画时常的毫秒数值（如：1000）。

easing：用来指定切换效果，默认是"swing",可用参数"linear"。

fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

hide()隐藏效果

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

toggle()切换，点击隐藏，点击显示

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

案例时刻

点击显示按钮，显示盒子，点击隐藏按钮，隐藏盒子，点击切换按钮，盒子隐藏时显示，显示时隐藏。

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画效果</title>
    <script src="jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            margin-top: 50px;
            background-color: skyblue;
        }
        button{
            width: 90px;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function(){
                $("div").show("slow");
            })
            $("button").eq(1).click(function(){
                $("div").hide("slow");
            })
            $("button").eq(2).click(function(){
                $("div").toggle("slow");
            })
        })
    </script>
</body>
</html>

滑动效果

slideDown()下拉效果、slideUp()上拉效果、slideToggle()

slideDown()

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

slideUp()

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

slideToggle()

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

案例时刻

和上面的案例差不多，将函数进行修改就可以看到滑动的效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画效果</title>
    <script src="jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            margin-top: 50px;
            background-color: skyblue;
        }
        button{
            width: 90px;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function(){
                $("div").slideDown("slow");
            })
            $("button").eq(1).click(function(){
                $("div").slideUp("slow");
            })
            $("button").eq(2).click(function(){
                $("div").slideToggle("slow");
            })
        })
    </script>
</body>
</html>

如果鼠标快速连续点击切换按钮，停止之后动画会坚持出现完，这是因为动画之间有排队的效果。如何阻止排第效果呢？可以用到stop()

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

淡入淡出效果

fadeIn()、fadeOut()、fadeToggle()、fadeTo()

fadeIn()淡入效果

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

fadeOut()淡出效果

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

fadeToggle()淡入淡出效果

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

fadeTo()修改透明度

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

opacity透明度必须写，取值0~1之间。

speed也必须写。

自定义动画

animate()

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

params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号；如果是复合属性必须采取驼峰命名法。其余参数可以省略。

$(function() {
            $("button").eq(3).click(function(){
                $("div").animate({
                    left:400,
                    top:500
                })
            })
        })