I tried to add a slowdown effect while returning the element to its original size with resizable.
The slowdown would only have to occur on the turn (when the "Click-me" button was pressed), never while handling the element with the mouse.
I tried add transition property in jQuery .css():
'transition': '1s ease-in-out'
My code is:
<!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>
I tried adding the 1 second slow effect when the element was getting back to its normal size.
It’s not possible to do
thing.animate({ "height": "auto" });.You essentially clone the element, remove the fixed heights currently inflicting the element, and measure/save the value. Then you animate the real element to that value.
As you are using jQuery You can use this function to animate it:
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);
});
}
Then use function as :
$(function() {
$('.box').resizable();
$('#btn').click(function() {
$(".box").animateAuto("both", 1000);
});
});