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>

I am trying to switch the li element with animation which will be like slowly moving upwards but can't seem to make it, above is what I have practiced till now and I am weak at jquery animation hope to get your feedback/help what I want is animation like this code http://jsfiddle.net/BYossarian/GUsYQ/5/ any answer or help would be appreciated.我正在尝试用动画切换 li 元素，这就像慢慢向上移动但似乎无法做到，以上是我到目前为止所练习的，我在 jquery 动画方面很弱希望得到你的反馈/帮助我想要的是像这样的代码http://jsfiddle.net/BYossarian/GUsYQ/5/的动画任何答案或帮助将不胜感激。 Manga read 漫画阅读

Answer 1

your CSS does not visible effect on this animation你的 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随着动画慢慢切换

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-05-26 10:08:51

jquery动画切换div随着动画慢慢切换

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-05-26 10:08:51

解决方案1
1 已采纳 2022-05-26 10:08:51