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

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

效果图

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

在这里插入图片描述

完整代码

<!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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值