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 |
Track2 | 10,828 Kb |
Responsive2 | 7,059 Kb |
Meiji | 8,051 Kb |
Template | 2,323 Kb |
Javascript only | 2,016 Kb |
Parents | 3,676 Kb |
Task | 5,383 Kb |
Slider hover | 2,000 Kb |
Javascript2 | 1,997 Kb |
A Pen by nugroho indra utomo | 7,925 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 |
Countdown Timer | Massiebn | 3,001 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Ocean | Gordonnl | 2,817 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Template | Indra_z85 | 2,323 Kb |
DFF Website | Hawcubite | 10,123 Kb |
Cofee and sugar | Tripack | 2,094 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!