Jquery effect
How do I make an jquery effect?
What is a jquery effect? How do you make a jquery effect? This script and codes were developed by Nugroho Indra Utomo on 17 October 2022, Monday.
Jquery effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jquery effect</title>
</head>
<body> <html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Show Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.toggler { width: 500px; height: 400px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 500px; height: 300px; padding: 0.4em; position: relative; color:red; background-color:blue; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 100 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 280, height: 185 } };
}
// run the effect
$( "#effect" ).show( selectedEffect, options, 500, callback );
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
});
$( "#effect" ).hide();
});
</script>
</head>
<body>
<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="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>
</body>
</html>
</body>
</html>
Developer | Nugroho Indra Utomo |
Username | indra_z85 |
Uploaded | October 17, 2022 |
Rating | 3 |
Size | 2,139 Kb |
Views | 26,312 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Task | 5,383 Kb |
Js form | 1,753 Kb |
Fancy box effect | 19,982 Kb |
Club t | 8,583 Kb |
Template | 2,323 Kb |
Slider hover | 2,000 Kb |
Jquery effect | 2,139 Kb |
Javascript2 | 1,997 Kb |
Responsive2 | 7,059 Kb |
Meiji | 8,051 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Project MMetro beta | Atomicsong | 5,157 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Experiment | Toddmoy | 2,849 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
About Mazano | Kiti | 2,585 Kb |
Content Changer | Cliffpyles | 4,538 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
Light Switch | Bartuc | 4,933 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!