<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>Estoy tratando de cambiar el elemento li con la animación, que será como moverse lentamente hacia arriba, pero parece que no puedo hacerlo, arriba está lo que he practicado hasta ahora y soy débil en la animación jquery. Espero recibir sus comentarios/ayuda. lo que quiero es una animación como este código http://jsfiddle.net/BYossarian/GUsYQ/5/ cualquier respuesta o ayuda sería apreciada. lectura manga
tu CSS no tiene un efecto visible en esta animación
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>