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: 12 years ago
Size: 2,656 bytes


Class file image Download
<!DOCTYPE html> <!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, * 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: * **************************************************************/ --> <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=""></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>