Stop double loop of multiple animation on hover with jquery

Question

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!

Hiya, Just few advises - 1) read about chaining in JQuery, i.e. you can do chaining between the function with in element so this will avoid multiple lines of event binding to same element. also 2) i usually follow DRY (do not repeat yourself principle) i.e. if you can make a common function for your --> 'code' text_pulse($(this).children('.fader_title')); image_pulse($(this).children('.fader_image')); and I find these tips pretty helpful. tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx ; hope it gives you good and helpful information to start with, tc — Tats_innit
– Tats_innit, Commented Mar 10, 2012 at 3:38

Pedro · Accepted Answer · 2012-03-13 15:47:14Z

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'));
        });          
    });

});

Collectives™ on Stack Overflow

Stop double loop of multiple animation on hover with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related