jQuery滑动特效，自定义特效，名单小项目

最新推荐文章于 2024-08-27 16:05:08 发布

opo77_

最新推荐文章于 2024-08-27 16:05:08 发布

阅读量122

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/opo77_/article/details/109028520

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

滑动特效

项目 | Value -------- | ----- 电脑 | $1600 手机 | $12 导管 | $1

滑动特效
.slideUp()	如果元素已经显示出来的话，通过使用滑动效果，隐藏被选元素
.slideDown()	通过使用滑动效果，先是被隐藏的被选元素
.slideToggle()	通过使用滑动效果来切换元素的可见状态

.slideUp()

括号里也可以写数字，表示效果持续时间
如果元素是显示的状态，这个方法会隐藏元素，用滑动的方式。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>动画特效</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        #box{                        width:200px;            height:200px;            background: rgb(218, 88, 88);        }    </style></head><body>    <div id="box"></div>    <button id="change">点我有特效</button>    <script>        $(function(){            $("#change").on('click',function(){                $("#box").slideUp(2000);                            })        });    </script></body></html>

效果不展示了。

.slideDown()方法
和上一个相反

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>动画特效</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        #box{            display: none;            width:200px;            height:200px;            background: rgb(218, 88, 88);        }    </style></head><body>    <div id="box"></div>    <button id="change">点我有特效</button>    <script>        $(function(){            $("#change").on('click',function(){                $("#box").slideDown(2000);                            })        });    </script></body></html>

.slideToggle()
切换

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>动画特效</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        #box{            display: none;            width:200px;            height:200px;            background: rgb(218, 88, 88);        }    </style></head><body>    <div id="box"></div>    <button id="change">点我有特效</button>    <script>        $(function(){            $("#change").on('click',function(){                $("#box").slideToggle(2000);                            })        });    </script></body></html>

自定义特效

自定义特效的原理就是改变css属性

.animate(properties[,duratior],[,easing],[,complete])

animate(自定义特效的方法）（必选）
properties（要更改的css样式）（必选）
duratior（持续时间，以毫秒为单位）
easing（这里可以写一个字符串参数，两种选择linear（表示动画速度是线性的），swing（动画开始和结束较慢，中间快））
complete（动画结束后需要调用的函数）

下面针对于properties做出笔记以及示例
css属性的选择和属性名的写法：
一般来说，只要这个属性值可以表现为数字就可以使用。比如：width height，opacity可以使用，font-family，text-align等就不行。使用驼峰法写属性名。
属性值：每个属性的值表示这个样式属性到多少时动画结束，属性值有三种形式，除了写数字，还可以写hide，show，toggle这样的字符串，也可以写一个相对值。如果你提供以+=或者- =开始的值，那么目标值就是当前数字加上或者减去那个值。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>动画特效</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        #box{            position: absolute;            opacity: 0.5;            width:100px;            height:100px;            background: rgb(104, 153, 196);        }    </style></head><body>    <button id="left"><<</button>    <button id="right">>></button>    <div id="box"></div>    <script>        $(function(){            // 点击<<键时向左移动50px，并把透明度设置为0.7            $("#left").on('click',function(){                $("#box").animate({                    left:'-=50',                    opacity:0.7                });            });            // 点击>>键时向右移动50px，并把透明度设置为0.3            $("#right").on('click',function(){                $("#box").animate({                    left:'+=50',                    opacity:0.3                });            });        });    </script></body></html>

这部分代码实现的就是一个方块两个按钮<<和>>，点击<<键时向左移动50px，并把透明度设置为0.7；点击>>键时向右移动50px，并把透明度设置为0.3 。
如果要写和位置有关的动画，要注意把position设置为relative或者fixed或者absolute。

下面对于后三个参数做出笔记与示例：
两个控制动画效果运行的方法
.delay()，延缓动画的运行
.stop(),终止动画的运行

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>动画特效</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        #box{                        background: rgb(163, 28, 216);        }    </style></head><body>    <button id="start">开始</button>    <button id="stop">停止</button>    <div id="box"></div>    <script>        $(function(){            // 点击开始按钮的时候，会延时1秒再开始动画            $("#start").on('click',function(){                $("#box").delay(1000).animate({                    width:"500px",                    height:"500px",                },5000,"linear",function(){                    $("#box").remove();                });                // 动画的持续时间是5秒，速度均匀，动画完成之后会被移除                // 如果你中途点击停止，动画会停止运行            });                        $("#stop").on('click',function(){                $("#box").stop();                });            });            </script></body></html>

一个小动画，点击按钮开始，点击停止按钮动画停止运行。
小项目之名单特效

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>特效demo</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        body{            font-size: 25px;        }        h2{            text-align: center;        }        li{            margin:5px auto;            line-height: 50px;            padding-left: 50px;            background-color: violet;            width:200px;            height: 50px;            border:1px solid black;            border-radius: 10px;            list-style: none;        }    </style></head><body>    <h2>name list</h2>    <ul>        <li>Annieka</li>        <li>Chalotte</li>        <li>Sophia</li>        <li>Tomcat</li>        <li>陈子怡</li>        <li>罗田琪</li>        <li>丁韵旎</li>        <li>lemon juice</li>    </ul>    <script>        $(function(){                        $("h2").hide().slideDown();            var $li=$("li");            $li.hide().each(function(index){                $(this).delay(700 * index).fadeIn(700);            });            // 参数index默认当前选择器的位置，也就是当前元素的编号            $li.on('click',function(){                $(this).fadeOut(700);            });        });    </script></body></html>