jQuery实现简单的动画

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

Han_Zhou_Z

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

阅读量396

点赞数 1

文章标签： jquery 动画前端

本文链接：https://blog.csdn.net/han_zhou_z/article/details/122385454

版权

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

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

一、显示/隐藏

二、向上收缩/向下展开

三、淡入/淡出

一、显示/隐藏

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').bi