The drop effect is simple. Elements appear to drop off of (or onto) the page, which is simulated by adjusting the element's height and opacity. There are many situations in which this would be useful but one that instantly springs to mind is when creating custom tooltips.
We can easily create a tooltip that appears when an element is hovered over, but instead of just showing the tooltip after a specified period of time has elapsed, we can drop it on to the page instead. Add a link to the CSS framework file and change the stylesheet link in the <head>
of effectPulsate.html
:
<link rel="stylesheet" type="text/css" href="development-bundle/themes/smoothness/ui.all.css"> <link rel="stylesheet" type="text/css" href="css/effectDrop.css">
Remove the countdown <div>
from the page and add the following markup instead:
<div id="container" class="ui-widget-content" > <p>Lorem <a id="link1" href="#" title="This is a link">ipsum<...