up vote 0 down vote favorite

I have two icon animations that pretty much do the same thing, the only difference between them is positioning... one is left and the other right.

I would like to use one block of code for both left and right icon animations... please help

Thanks in advance!!

//////////// Left Icon Animation ////////////
$('.recent .left-icon').css({opacity:0, left:33});
$('.recent .controls-wrap').hover(function() {
    $(this).find('.left-icon').stop()
        .animate({left:63}, {duration:300})
        .animate({opacity:'0.99'}, {duration:400});
},function() {
    $(this).find('.left-icon').stop()
        .animate({left:33}, {duration:550})
        .animate({opacity:'0'}, {duration:300});
});





//////////// Right Icon Animation ////////////
$('.recent .right-icon').css({opacity:0, right:33});
$('.recent .controls-wrap').hover(function() {
    $(this).find('.right-icon').stop()
        .animate({right:63}, {duration:300})
        .animate({opacity:'0.99'}, {duration:400});
},function() {
    $(this).find('.right-icon').stop()
        .animate({right:33}, {duration:550})
        .animate({opacity:'0'}, {duration:300});
});
share|improve this question

migrated from stackoverflow.com May 16 '12 at 3:33

2 Answers

up vote 1 down vote

Make a function with one parameter, depending on the direction (right or left), copy a block of code and replace the key word there.

share|improve this answer
up vote 1 down vote

Why don't you add a common class name, say, anim-icon to both the icons, and add a left and right class to each one of them.

Then: 

$('.recent .anim-icon').each(function(){
    // thisClass will have either left or right
    var thisClass = $(this).attr('class').replace('anim-icon ',''),
    $this = $(this);
    $this.css({opacity:0, thisClass:33});
    $('.recent .controls-wrap').hover(function() {
        $this.stop()
        .animate({thisClass:63}, {duration:300})
        .animate({opacity:'0.99'}, {duration:400});
    },function() {
    $this.stop()
        .animate({thisClass:33}, {duration:550})
        .animate({opacity:'0'}, {duration:300});
    });
});
share|improve this answer

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.