jquery实现列表项的平滑过渡上下移动效果

最新推荐文章于 2024-04-17 02:25:22 发布

MNSSIOU

最新推荐文章于 2024-04-17 02:25:22 发布

阅读量945

点赞数

分类专栏：前端文章标签： jquery 列表项平滑移动

本文链接：https://blog.csdn.net/NewCode2/article/details/103259020

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

列表项在上下移动操作时，增加平滑过渡的效果

效果图

主要实现平滑过渡移动效果，样式有点丑，自己可以美化

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>列表项平滑过渡上下移动</title>
   <style>
       .move {
           width: 400px;
           height: 200px;
           margin: 50px auto;
           list-style: none;
           position: relative;
       }

       .move li {
           width: 100%;
           height: 40px;
           padding-left: 40px;
           line-height: 40px;
           position: absolute;
           transition: all 500ms ease;
       }

       .move li button:first-child {
           margin-left: 240px;
           margin-right: 10px;
       }
   </style>
</head>

<body>
   <div class="container">
       <ul class="move">
           <li style="background: red;">苹果<button class="up">上移</button><button class="down">下移</button></li>
           <li style="background: yellow;">香蕉<button class="up">上移</button><button class="down">下移</button></li>
           <li style="background: blue;">橘子<button class="up">上移</button><button class="down">下移</button></li>
           <li style="background: green;">西瓜<button class="up">上移</button><button class="down">下移</button></li>
           <li style="background: gray;">菠萝<button class="up">上移</button><button class="down">下移</button></li>

       </ul>

   </div>
</body>
<script src="./js/jquery-3.3.1.js"></script> //引入自己的jquery库
<script>
   $(function () {

       $(".move li").each(function (index, ele) {
           $(this).css({
               "top": index * 40 + 'px'
           });
       })

       //上移
       $(".up").click(function () {
           var $li = $(this).parent();
           var $prev = $li.prev();
           var $index = $li.index();

           if ($index != 0) {

               var $top = parseInt($li.css("top").slice(0, -2));
               var $prevTop = parseInt($prev.css("top").slice(0, -2));

               $li.css('top', ($top - 40) + "px");
               $prev.css('top',($prevTop + 40) + "px");

               //添加一个异步，间隔时间和css过渡一样，否则不会有平滑过渡效果
              setTimeout(() => {
               $prev.before($li); 
              }, 500);
            
           }
       });

       //下移
       var $len = $(".down").length;
       $(".down").click(function () {

           var $li = $(this).parent();
           var $index = $li.index();
           var $next = $li.next();

           if ($index != $len - 1) {

               var $top = parseInt($li.css("top").slice(0, -2));
               var $nextTop = parseInt($next.css("top").slice(0, -2));

               $li.css('top', ($top + 40) + "px");
               $next.css('top', ($nextTop - 40) + "px");
              
               setTimeout(() => {
                   $next.after($li);
               }, 500);
           }
       });

   })

</script>

</html>