Question

I have two animations which are practically identical… the difference between them is “left vs right” positioning. I would like to reuse the first block of code for both .forward and .backward… I’m guessing this could be done with the use of a HTML 5 data- attributes or maybe variables, but I’m not sure how to go about that.

Please advise this noob… thanks!

      .hover-area { position:relative; width:100%; height:50px; }
      .backward, .forward { position:absolute; }
      .backward{ left:0px; }
      .forward { right:0px; }​


      <div class="hover-area">
          Hover Area
          <div class="backward">Previous</div>
          <div class="forward">Next</div>
      </div>

        $('.forward').css({opacity:0, right:0});
        $('.hover-area').hover(function() {
            $(this).find('.forward').stop()
                .animate({right:20}, {queue:false, duration:300, easing:'easeOutCubic'})
                .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
        },function() {
            $(this).find('.forward').stop()
                .animate({right:0}, {queue:false, duration:550, easing:'easeOutSine'})
                .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
        });




        $('.backward').css({opacity:0, left:0});
        $('.hover-area').hover(function() {
            $(this).find('.backward').stop()
                .animate({left:20}, {queue:false, duration:300, easing:'easeOutCubic'})
                .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
        },function() {
            $(this).find('.backward').stop()
                .animate({left:0}, {queue:false, duration:550, easing:'easeOutSine'})
                .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
        });

Answer 1

The easiest (and most versatile) method may be to use HTML5 data-attributes to store the start/stop animation states as JSON data. Example:

http://jsfiddle.net/ChrisPebble/LFsVr/

HTML

<div class="hover-area" data-animate-on='{"right":"20"}' data-animate-off='{"right":"0"}'>hover over me
    <div class="slider">I move to the right</div>
</div>

<div class="hover-area" data-animate-on='{"left":"20"}' data-animate-off='{"left":"0"}'>hover over me
    <div class="slider">I move to the left</div>
</div>

jQuery

$('.slider').css({opacity:0, right:0});
$('.hover-area').hover(function() {
    var animationOn = jQuery.parseJSON(($(this).attr("data-animate-on")));
    $(this).find('.slider').stop()
        .animate(animationOn, {queue:false, duration:300, easing:'easeOutCubic'})
        .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
},function() {
    var animationOff = jQuery.parseJSON(($(this).attr("data-animate-off")));
    $(this).find('.slider').stop()
        .animate(animationOff, {queue:false, duration:550, easing:'easeOutSine'})
        .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
});