Icontem

File: jquery_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Water drop  >  jquery_example.html  >  Download  
File: jquery_example.html
Role: Example script
Content type: text/plain
Description: Jquery examples
Class: Water drop
Apply the water drop effect to Web page elements
Author: By
Last change:
Date: 8 years ago
Size: 2,656 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<!--
/*************************************************************
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * Feel free to distribute and modify code, but keep reference to its creator
 *
 * Water drop provides a drip effect on HTML objects as standalone 
 * package and jquery plugin. It is possible to configure, speed, 
 * color, field and toggle animations as fading and expanding.
 *
 * For more information, examples and online documentation visit: 
 * http://webcodingeasy.com/JS-classes/Water-drop-effect
**************************************************************/
-->
<html>
<head>
</head>
<body>
<p>On click: <a href='javascript:void(0);' id='click'>Click me</a></p>
<p>On mouse over: <a href='javascript:void(0);' id='mouseover'>Hover me</a></p>
<p>Manual calling (click on this link, effect will work on above one): 
	<a href='javascript:void(0);' onclick='$("#mouseover").waterDrop("drop")'>Click me</a></p>
<p>Reverse effect: <a href='javascript:void(0);' id='reverse'>Click me</a></p>
<p>Opacity only: <a href='javascript:void(0);' id='opacity'>Click me</a></p>
<p>Expand only: <a href='javascript:void(0);' id='expand'>Click me</a></p>
<p>Transparent background: <a href='javascript:void(0);' id='transparent'>Click me</a></p>
<p>Styled borders: <a href='javascript:void(0);' id='border'>Click me</a></p>
<p>Callback previous one on animation end: <a href='javascript:void(0);' id='callback'>Click me</a></p>
<p>Loop animation: <a href='javascript:void(0);' id='loop'>Click me</a></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="./waterDrop.jquery.js" ></script>
<script type="text/javascript">
//simple click
$("#click").waterDrop();
//mouse hover
$("#mouseover").waterDrop({event:"mouseover"});
//reverse effect
$("#reverse").waterDrop({reverse: true});
//opacity only
$("#opacity").waterDrop({expand: false, padding: 5});
//expand only
$("#expand").waterDrop({fadeOut: false});
//transparent background
$("#transparent").waterDrop({backgroundColor: "transparent"});
//styled borders
$("#border").waterDrop({borderStyle: "dashed", borderColor: "red", borderWidth: 4, borderRadius: 50});
//callback on animation and
$("#callback").waterDrop({onend: function(){$("#border").waterDrop({borderStyle: "dashed", borderColor: "red", borderWidth: 4, borderRadius: 50}, "drop");}});
//loop animation
$("#loop").click(function(){$("#loop").waterDrop("drop"); setInterval(function(){$("#loop").waterDrop("drop");}, 1000)});
</script>
</body>
</html>