How to get image to pulse with opacity with JQuery

Question

I am trying to get an image to change opacity smoothly over a duration of time. Here's the code I have for it.

<script type="text/javascript">
pulsem(elementid){
    var element = document.getElementById(elementid)
    jquery(element).pulse({opacity: [0,1]}, 
{    duration: 100, // duration of EACH individual animation    
     times: 3, // Will go three times through the pulse array [0,1]   
     easing: 'linear', // easing function for each individual animation    
     complete: function() {        alert("I'm done pulsing!");    }
})
</script>


<a href="city.htm"><img src="waterloo.png" onmouseover="javascript:pulsem("waterloo")" border="0" class="env" id="waterloo"/></a>

Also, is there a way for this to happen automatically without the need of a mouseover? Thanks.

Answer 1

I'm assuming your code is for the jQuery pulse plugin: http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/

If your above code is not working, then fix "jquery" to be "jQuery".

For starting it on page load, just do:

jQuery(function() {
jQuery('#yourImageId').pulse({
    opacity: [0,1]
}, {
     duration: 100, // duration of EACH individual animation
     times: 3, // Will go three times through the pulse array [0,1]
     easing: 'linear', // easing function for each individual animation
     complete: function() {
         alert("I'm done pulsing!");
    }
});

Add an id to your image and you're golden. });