Two icon animations — one on the left, one on the right 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.

//////////// 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});
});
Make a function with one parameter, depending on the direction (right or left), copy a block of code and replace the key word there.