Jquery Ui resizable Animate Example Tutorial

Jqury UI

Nicesnippets

69

23-06-2020


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:This option can be used to add animation to the resizing of the element.

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...