Jquery 动画切换 div 慢慢跟动画

Question

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style type="text/css">
        .header {
            position: absolute;
            top: 0px;
            height: 50px;
            width: 100%;
            background: #f00;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="header">
                <p>Header</p>
            </div>
        </li>
        <li>
            <div class="header">
                <p>Hello World</p>
            </div>
        </li>
        <li>
            <div class="header">
                <p>Footer</p>
            </div>
        </li>
    </ul>
    <script>
        $(".header").on("click", function () {
            var e = $(this).closest("li");
            
            
            e.prev().insertAfter(e);
        })
    </script>
</body>

</html>

我正在尝试用动画切换 li 元素，它会像慢慢向上移动但似乎无法做到，以上是我目前练习的并且我在 jquery 动画方面很弱希望得到你的 feedback/help 我想要的是像这段代码这样的动画 http://jsfiddle.net/BYossarian/GUsYQ/5/ 任何答案或帮助将不胜感激。

Answer 1

您的 CSS 对此动画没有可见效果

var animating = false;
$(".header").on("click", function() {
     var clickedDiv = $(this).closest("li");
    if (animating) {
        return;
    }

    prevDiv = clickedDiv.prev(),
    distance = clickedDiv.outerHeight();

    if (prevDiv.length) {
        animating = true;
        $.when(clickedDiv.animate({
            top: -distance
        }, 600),
        prevDiv.animate({
            top: distance
        }, 600)).done(function () {
            prevDiv.css('top', '0px');
            clickedDiv.css('top', '0px');
            clickedDiv.insertBefore(prevDiv);
            animating = false;
        });
    }
});

li {
   width: 200px;
    border: 1px solid black;
    position: relative;
    margin:10px;
}
li .header {
    border: 1px solid black;
    position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>      
   <li>
       <div class="header"> 
         <p>Header</p> 
      </div>
      </li>
      <li>
      <div class="header"> 
         <p>Hello World</p> 
      </div> 
      </li>
      <li>
      <div class="header"> 
         <p>Footer</p> 
      </div>  
  </li>
</ul>

Jquery 动画切换 div 慢慢跟动画

Jquery animation switch div slowly with animation

html

javascript

css

jquery