JQuery UI Show Animation Effects Tutorial | JQuery Show Animation Effects Example

Jquery , Jqury UI

Nicesnippets

1123

16-06-2020


JQuery UI Show Animation Effects Tutorial | JQuery Show Animation Effects Example

Hi Guys,

In this example,I will learn you how to use show animation effects in jquery ui.you can easy and simply use show animation effects in jquery ui.

Example :


<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Effects - Show Demo</title>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style>

.toggler {

width: 500px;

height: 200px;

}

#button {

padding: .5em 1em;

text-decoration:

none;width: 100%;

}

#effect {

width: 390px;

height: 170px;

padding: 0.4em;

position: relative;

}

#effect h3 {

margin: 0;

padding: 0.4em;

text-align: center;

}

.main-section{

margin:30px auto;

width:30%;

padding:50px;

border-radius: 5px;

border:2px solid #000;

}

select{

padding:10px;

width: 100%;

margin-bottom:20px;

}

h1{

text-align: center;

}

body{

background-color: #efa7a7;

}

</style>

</head>

<body>

<h1>jQuery UI Effects - Show Demo - Nicesnippets.com</h1>

<div class="main-section">

<div class="toggler">

<div id="effect" class="ui-widget-content ui-corner-all">

<h3 class="ui-widget-header ui-corner-all">Show</h3>

<p>

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.

</p>

</div>

</div>

<select name="effects" id="effectTypes">

<option value="blind">Blind</option>

<option value="bounce">Bounce</option>

<option value="clip">Clip</option>

<option value="drop">Drop</option>

<option value="explode">Explode</option>

<option value="fade">Fade</option>

<option value="fold">Fold</option>

<option value="highlight">Highlight</option>

<option value="puff">Puff</option>

<option value="pulsate">Pulsate</option>

<option value="scale">Scale</option>

<option value="shake">Shake</option>

<option value="size">Size</option>

<option value="slide">Slide</option>

</select>

<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>

</div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>

$( function() {

function runEffect() {

var selectedEffect = $( "#effectTypes" ).val();

var options = {};

if ( selectedEffect === "scale" ) {

options = { percent: 50 };

} else if ( selectedEffect === "size" ) {

options = { to: { width: 280, height: 185 } };

}

$( "#effect" ).show( selectedEffect, options, 500, callback );

};

function callback() {

setTimeout(function() {

$( "#effect:visible" ).removeAttr( "style" ).fadeOut();

}, 1000 );

};

$( "#button" ).on( "click", function() {

runEffect();

});

$( "#effect" ).hide();

});

</script>

</body>

</html>

It will help you...


Recommended Posts