11-Apr-2023
.
Admin
Hi Guys,
In this tutorial,I will learn you how to use resizeable animate in jquery ui.you can easy use resizeable animate in jquery ui.
The resizeable widget of jQuery UI helps to drag and resize the selected elements.
animate:
animateDuration:This field allows you to choose how long you want the animation to last.
Example :
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Resizable : Animating the Resizable</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
#coach{
width:300px;
height:300px;
margin:30px;
border:5px solid #ddd;
overflow:hidden;
box-shadow:5px 5px 5px #444;
background-color:#44c765;
margin: 0 auto;
}
body{
text-align: center;
}
</style>
</head>
<body>
<h2>JQuery UI Resizable - Nicesnippets.com</h2>
<div id="coach" class="ui-widget">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7Bo00Wr7bTO5_C3ZO6i3jW03D8Iw_sbdIANXN1enTgDCdN5jN&usqp=CAU" />BUS -<br> While Resizing the Box you will notice a resizable ghost which disappears when resizing is complete.
</div>
<script>
$(document).ready(function() {
$("#coach").resizable({
ghost: true,
animate: true,
animateDuration: "slow"
});
});
</script>
</body>
</html>
It will help you...
#Jqury UI
