Jquery-04-自定义动画animate

陈行恩

已于 2022-07-01 10:34:31 修改

阅读量241

点赞数 1

分类专栏：前端方面文章标签：动画 css html jquery

于 2021-08-30 16:39:55 首次发布

本文链接：https://blog.csdn.net/m0_56981185/article/details/120000187

版权

前端方面专栏收录该内容

11 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src="../jquery/jquery-3.6.0.min.js"></script>

    <!-- 如果写了+=，就表示在前一个动画的位置继续 -->
    <script>
        $(function(){
           $("#fish").animate({left:"100px",opacity:1},5000)
           .animate({left:"+=100px",opacity:0.5},3000)
           .animate({left:"+=100px",opacity:0.0},1000);
        })
    </script>

</head>
<body>
    <!--使用自定义动画时，position只能设置为：
    relative相对定位、 absolute绝对定位、fixed总是根据浏览器的窗口来进行元素的定位
    -->
    <div id="fish" style="position: absolute;">
        <img src="../images/Fish.png" width="50px" />
    </div>
      
</body>
</html>

陈行恩

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jquery-04-自定义动画animate

<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-sc.
复制链接

扫一扫