jQuery实现简单的动画

最新推荐文章于 2023-08-10 16:36:12 发布

Han_Zhou_Z

最新推荐文章于 2023-08-10 16:36:12 发布

阅读量425

点赞数 1

文章标签： jquery 动画前端

本文链接：https://blog.youkuaiyun.com/Han_Zhou_Z/article/details/122385454

版权

这篇博客介绍了如何使用jQuery实现三种基本的动画效果：显示/隐藏、向上收缩/向下展开及淡入/淡出。在显示/隐藏中，元素会从左上角扩张或向左上角收缩。向上收缩/向下展开通过slidUp和slidDown方法实现，元素分别从顶端向下展开或向上收缩。淡入淡出效果则通过fadeIn和fadeOut完成，元素的透明度逐渐变化，交替操作则在可见和不可见间切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、显示/隐藏

二、向上收缩/向下展开

三、淡入/淡出

一、显示/隐藏

1、显示：show(speed,[callback])

2、隐藏：high(speed,[callback])

3、交替：toggle(speed,[callback]),若'显示'则'隐藏';若'隐藏'则显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery.js"></script>
</head>
<style>
    #img1{
        display:none ;
    }
</style>
<body>
    <button id="btn_show">显示</button>
    <button id="btn_hide">隐藏</button>
    <button id="btn_toggle">交替</button>
    <br><br>
    <img src="../img/3.jpg" alt="" width="150" height="200" id="img1">

    <script>
        $(function(){
            $('#btn_show').bind('click',function(){
                $('#img1').show('3000')//表示在一秒钟内显示图片
            })
            $('#btn_hide').bind('click',function(){
                $('#img1').hide('3000')//表示在一秒钟内显示图片
            })
            $('#btn_toggle').bind('click',function(){
                $('#img1').toggle('slow')//表示在一秒钟内隐藏或显示图片
            })
            
        })
        
    </script>
</body>
</html>

显示效果：点击显示时，会从左上角开始扩张。点击隐藏是，图片向左上角收缩至没有。点击交替的时候，有图片时则收缩图片。没有图片时就展开图片

二、向上收缩/向下展开

1、收缩：slidUp(speed,[callback])

2、展开：slidDown(speed,[callback])

3、交替：slidToggle(speed,[callback])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery.js"></script>
</head>
<style>
    #img1{
        display:none ;
    }
</style>
<body>
    <button id="btn_up">收缩</button>
    <button id="btn_down">展开</button>
    <button id="btn_slide">交替</button>
    <br><br>
    <img src="../img/4.jpg" alt="" width="150" height="200" id="img2">

    <script>
        $(function(){

            $('#btn_up').bind('click',function(){
                $('#img2').slideUp()//向上收缩
            })
            $('#btn_down').bind('click',function(){
                $('#img2').slideDown()//向下展开
            })
            $('#btn_slide').bind('click',function(){
                $('#img2').slideToggle(2000)//交替收缩或是展开
            })
            
        })
        
    </script>
</body>
</html>

显示效果：点击展开时，图片由顶端向下展开。点击收缩时，图片向上进行收缩，直至消失。点击交替时，有图片则收缩到上方。没有图片则由上方展开图片

三、淡入/淡出

1、淡入：fadeIn(speed,[callback])

2、淡出：fadeOut(speed,[callback])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery.js"></script>
</head>
<style>
    #img1{
        display:none ;
    }
</style>
<body>
    <button id="btn_fadeIn">淡入</button>
    <button id="btn_fadeOut">淡出</button>
    <button id="btn_fadeToggle">交替</button>
    <br><br>
    <img src="../img/2.jpg" alt="" width="150" height="200" id="img3">

    <script>
        $(function(){
            $('#btn_fadeIn').bind('click',function(){
                $('#img3').fadeIn(1000)//图片淡入
            })
            $('#btn_fadeOut').bind('click',function(){
                $('#img3').fadeOut(1000)//图片淡出
            })
            $('#btn_fadeToggle').bind('click',function(){
                $('#img3').fadeToggle(1000)//交替淡入或淡出
            })
        })
        
    </script>
</body>
</html>