jQuery效果-动画

最新推荐文章于 2024-01-23 10:57:13 发布

Southern Wind

最新推荐文章于 2024-01-23 10:57:13 发布

阅读量127

点赞数 2

分类专栏： jQuery 文章标签： jquery 动画

本文链接：https://blog.csdn.net/nanchen_J/article/details/120101355

版权

jQuery 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

animate（）方法

用于创建自定义动画。

语法： $(selector).animate({params},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>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            position: relative;
        }
    </style>
</head>

<body>
    <button>点击开始动画</button>
    <div></div>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function(){
            $('button').click(function(){
                $('div').animate({left:'250px'});
            })
        })
    </script>
</body>

</html>

注意：在默认情况下，如果向移动某个元素的位置，那么就要把元素的position属性设置为relative、fixed或者absolute

效果如图：

使用animate()-操作多个属性

$(document).ready(function(){
            $('button').click(function(){
                $('div').animate({
                    left:'250px',
                    opacity:'0.5',
                    height:'200px',
                    width:'200px'
                });
            });
        });

可以用animate()方法来操作所有的css样式吗？

基本都可以，只不过要用规定的语法去写相对应的属性名

例如：margin-top就要写成 marginTop 类似于驼峰命名法

如果想要彩色的动画，可以从官网下载插件，并不包含在jQuery库中

可以对animate()使用相对值

可以设置相对值（该元素的当前的值）。只需要在值的前面加上 += 或 -=

$(document).ready(function(){
            $('button').click(function(){
                $('div').animate({
                    left:'250px',
                    width:'+=50px',  //只需要在值的前面加上 += 或 -=
                    height:'+=50px',
                });
            });
        });

可以对animate()使用预定义值

就是可以把动画的属性值设置成'show',"hide","toggle"实现动画效果

 $(document).ready(function(){
            $('button').click(function(){
                $('div').animate({
                    height:'toggle',     //设置"show"、"hide" 或 "toggle"也可以
                });
            });
        });

效果如下：

还可以对 animate() 使用队列功能

就是可以呈现一个完整的动画效果

可以在这些方法中去调用的"内部"队列。然后一个个的调用运行这些 animate 。

$(document).ready(function(){
            $('button').click(function(){
                var div = $('div');
                div.animate({
                    height:'300px'
                },'show');
                div.animate({
                    width:'300px',
                    fontSize:'30px'
                },'show');
                div.animate({
                    height:'100px'
                    
                },'show');
                div.animate({
                    width:'100px',
                    fontSize:'16px'
                },'show');
                
            });
        });

效果如下：

停止动画 stop()

用来中途暂停动画的执行

<!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>jquery-stop()停止动画</title>
    <style>
        #div1{
            width: 100%;
            height: 30px;
            background-color: gray;
            text-align: center;
        }
        #div2{
            width: 100%;
            height: 300px;
            background-color: greenyellow;
            text-align: center;padding-top: 135px;
            box-sizing: border-box;
            display: none;
        }
    </style>
</head>
<body>
    <button>停止按钮</button>
    <div id="div1">点击下滑整个盒子</div>
    <div id="div2">这是一个大盒子</div>
    
    <script src="../jquery-3.6.0.js"></script>
    <script>
        // 语法$(selector).stop(stopAll,goToEnd);
        $(document).ready(function(){
            $('#div1').click(function(){
            $('#div2').slideDown(5000);
        }),$('button').click(function(){
            $('#div2').stop();
        });
        })
    </script>
</body>
</html>

卷帘动画效果实现：

<!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>
    <style>
        #div1{
            width: 100%;
            height: 30px;
            background-color: gray;
            text-align: center;
        }
        #div2{
            width: 100%;
            height: 300px;
            background-color: greenyellow;
            text-align: center;
            padding-top: 135px;
            box-sizing: border-box;
            display: none;
        }
    </style>
</head>
<body>
    <button>停止按钮</button>
    <div id="div1">点击下滑整个盒子</div>
    <div id="div2">这是一个大盒子</div>
    
    <script src="../jquery-3.6.0.js"></script>
    <script>
        // 语法$(selector).stop(stopAll,goToEnd);
        $(document).ready(function(){
            $('#div1').click(function(){
            $('#div2').slideDown(5000);
            $('#div2').slideUp(5000);   //动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行：
        }),$('button').click(function(){
            $('#div2').stop();//可以在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画：
        });
        })
    </script>
</body>
</html>

效果如下：

Southern Wind

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
jQuery效果-动画

animate（）方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="..
复制链接

扫一扫