Traté de agregar un efecto de ralentización mientras devolvía el elemento a su tamaño original con resizable .
La desaceleración solo tendría que ocurrir en el turno (cuando se presiona el botón "Click-me"), nunca mientras se manipula el elemento con el mouse.
Intenté agregar la propiedad de transition en jQuery .css() :
'transition': '1s ease-in-out'mi código es:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <style> .box { border: 2px solid #008cba; margin-top: 10px; } </style> <script> $(function() { $('.box').resizable(); $('#btn').click(function() { $('.box').resizable().css({ 'width': 'auto', 'heigth': 'auto', 'transition': '1s ease-in-out' }); }); }); </script> </head> <body> <button id='btn' type='button'> Click-me </button> <div class='box'> <h1 class='el1'> CSS transition element </h1> </div> </body> </html>Intenté agregar el efecto lento de 1 segundo cuando el elemento volvía a su tamaño normal.
No es posible hacer
thing.animate({ "height": "auto" });Básicamente, clona el elemento, elimina las alturas fijas que actualmente infligen el elemento y mide/guarda el valor. Luego animas el elemento real a ese valor.
Como está usando jQuery, puede usar esta función para animarlo:
jQuery.fn.animateAuto = function(prop, speed, callback){ var elem, height, width; return this.each(function(i, el){ el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body"); height = elem.css("height"), width = elem.css("width"), elem.remove(); if(prop === "height") el.animate({"height":height}, speed, callback); else if(prop === "width") el.animate({"width":width}, speed, callback); else if(prop === "both") el.animate({"width":width,"height":height}, speed, callback); }); }Luego usa la función como:
$(function() { $('.box').resizable(); $('#btn').click(function() { $(".box").animateAuto("both", 1000); }); });