jQuery中的动画效果

最新推荐文章于 2024-02-21 10:01:09 发布

小召小召

最新推荐文章于 2024-02-21 10:01:09 发布

阅读量145

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/originalApril/article/details/115382619

版权

本文详细介绍了jQuery中实现动画效果的各种方法，包括淡入淡出、滑动、显示隐藏、自定义动画以及如何停止动画。通过示例代码展示了fadeIn()、fadeOut()、slideToggle()、animate()和stop()等关键函数的使用。

摘要由CSDN通过智能技术生成

一、淡入淡出

淡入淡出 ：其实就是不断改变元素的透明来实现的
       1 fadeIn() 带动画的显示
       2 fadeOut() 带动画的隐藏
       3 fadeToggle() 带动画的切换显示/隐藏

代码示例如下：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <style>
        .div1{
    
            width:200px;
            height:200px;
            position:absolute;
            top:50px;
            left:10px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <button id="btn1">慢慢淡出</button>
    <button id="btn2">慢慢淡入</button>
    <button id="btn3">慢慢淡入/淡出</button>

    <script src="./js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
    
            $("#btn1").click(function(){
    
                // 1000毫秒=1秒
                $(".div1").fadeOut(1000)
            })
            $("#btn2").click(function(){
    
                // 1000毫秒=1秒
                $(".div1").fadeIn(1000)
            })
            $("#btn3").click(function(){
    
                // 1000毫秒=1秒
                $(".div1").fadeToggle(1000)
            })
        })
    &