Working with the pulsate effect
The pulsate effect is another effect that works with the opacity of a specified element. This effect reduces the opacity temporarily, a specified number of times, making the element appear to pulsate.
In the following basic example, we'll create a simple countdown time that counts down from 15
. When the display reaches 10 seconds, it will begin to flash red. In effectPuff.html
, change the link in the <head>
element of the page to point to a new stylesheet:
<link rel="stylesheet" href="css/effectPulsate.css">
Then remove the loading <img>
element from the page and add the following element in its place:
<div id="countdown">15</div>
Next, change the source file of the effect so that the jquery.ui.effect-pulsate.js
file is used:
<script src="development-bundle/ui/jquery.ui.effect-pulsate.js"></script>
Finally, remove the existing last <script>
element, and replace it with the following:
<script> $(document).ready...