CODEWITHSUNDEEP
jqueryanimationloopshover
Pedro
Pedro

Reputation: 208

Stop double loop of multiple animation on hover with jquery

Ok.. So Iknow there are some similar questions but I've read them and still my code is still glitchy. I have an image and a text both inside the same container. The image should fade in as the text fades out. Also, there are multiple containers with image and text inside them.

I got the code to work but it look really ugly and it doesn't seem to work very well. ANy suggestions on how to improve this?

Here is a working example: http://jsfiddle.net/pedromvpg/ekbf2/

The code:

$(function () {

    function image_pulse(element){
        element.animate({opacity:0.3}, 700, function(){
            element.animate({opacity:1}, 700, function(){
                element.animate({opacity:0.3}, 700, image_pulse(element));    
            });
        });             
    }

    function text_pulse(element){
        element.animate({opacity:1}, 700, function(){
            element.animate({opacity:0}, 700, function(){
                element.animate({opacity:1}, 700, text_pulse(element));    
            });
        });             
    }


    $('.pulser_new').each(function (i) {
        text_pulse($(this).children('.fader_title'));
        image_pulse($(this).children('.fader_image'));  
    });

    $('.pulser_new').hover(
        function() {                 
            $(this).children('.fader_image').stop();
            $(this).children('.fader_image').animate({opacity:0.3},700); 
            $(this).children('.fader_title').stop();
            $(this).children('.fader_title').animate({opacity:1},700); 
            //alert("in");  
        },
        function() {
            image_pulse($(this).children('.fader_image'));
            text_pulse($(this).children('.fader_title'));
            //alert("out");     
        }
    );

});

Thanks in advance!

Upvotes: 0

Views: 881

Answers (1)

Pedro
Pedro

Reputation: 208

So, I was able to clean the code a little bit and get it to work better. My guess is that I wasn't running stuff on (document).ready...

working example: http://jsfiddle.net/pedromvpg/XtZyr/

function image_pulse(element){
    var fadeDuration = 650;
    element.css({ opacity: 0.33 });
    element.animate({
        opacity: 1
    }, fadeDuration, function() {
        element.animate({
            opacity: .33
        }, fadeDuration, function() {
                image_pulse(element);
        })
    });
}


function text_pulse(element){
    var fadeDuration = 650;
    element.animate({
        opacity: 0
    }, fadeDuration, function() {
        element.animate({
            opacity: 1
        }, fadeDuration, function() {
                text_pulse(element);
        })
    });
}


jQuery(document).ready(function() {

    $('.pulser_new').each(function (i) {
        image_pulse($(this).children('.fader_image'));
        text_pulse($(this).children('.fader_title'));
        $(this).mouseover(function() {
            $(this).children('.fader_image').stop().animate({opacity:0.3},700);
            $(this).children('.fader_title').stop().animate({opacity:1},700);
        }).mouseout(function() {
            $(this).children('.fader_image').stop();        
            $(this).children('.fader_title').stop();        
            image_pulse($(this).children('.fader_image'));
            text_pulse($(this).children('.fader_title'));
        });          
    });

});



​

Upvotes: 1

Related Questions