Naz Naz - 3 months ago 7
jQuery Question

Make jquery function run on page load

I have a jquery function to change the opacity of an image on mouse hover to produce a pulsating effect, but I would like to change it so that the image pulsates as soon as the page loads, removing the mouse hover elements mouse over and mouse out.

Here is the code I have

(function($) {
$(document).ready(function() {
window.pulse_image = null;
window.pulse_continue_loop = false;

$('.pulse_image').mouseover(function() {
// User is hovering over the image.
window.pulse_continue_loop = true;
window.pulse_image = $(this);

PulseAnimation(); // start the loop
}).mouseout(function() {
window.pulse_continue_loop = false;
window.pulse_image.stop();
window.pulse_image.css('opacity',1);
});
});
})(jQuery);


function PulseAnimation()
{
var minOpacity = .33;
var fadeOutDuration = 650;
var fadeInDuration = 650;

window.pulse_image.animate({
opacity: minOpacity
}, fadeOutDuration, function() {
window.pulse_image.animate({
opacity: 1
}, fadeInDuration, function() {
if(window.pulse_continue_loop) {
PulseAnimation();
}
})
});
}


From
http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/

Answer
(function($) {
    $(document).ready(function() {
        window.pulse_image = $('.pulse_image');
        window.pulse_continue_loop = true;
        PulseAnimation(); // start the loop
    });
})(jQuery);‚Äč
Comments