I attempted to incorporate a deceleration effect when resizing an element back to its original size using the resizable method.
The slowdown effect should only trigger during the click event (when the "Click-me" button is pressed), not while manipulating the element with the mouse.
To achieve this, I added the transition property within the jQuery .css() function:
'transition': '1s ease-in-out'
Here's my code snippet:
<!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 experimented with adding a one-second delay effect for the return of the element to its initial dimensions.