javascript - 有没有一种更干净的数据属性方法

不知道他们是不是一个更干净的方式来构建这个代码？？我希望对后退和前进按钮的左值和右值使用数据属性。
谢谢！!!

.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" data-animate-on='{"left":"20"}' data-animate-off='{"left":"0"}'>
    Previous
  </div>
  <div class="forward" data-animate-on='{"right":"20"}' data-animate-off='{"right":"0"}'>
    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'
     });
 });

最佳答案

您可以组合您的函数并将它们一起运行。
然后可以将类似的动画配置存储在变量中，然后使用它们。
要获取动画信息，您可以使用$(el).data('animate-on')，它将返回对象。
您也可以使用jQuery.each，因为您对按钮的操作非常相似。
.演示：http://jsfiddle.net/vYvVb/1/

$('.forward').css({ opacity: 0, right: 0 });
$('.backward').css({ opacity: 0, left: 0 });

$('.hover-area').hover(function () {
  var conf_1 = { queue: false, duration: 300, easing: 'easeOutCubic' };
  var conf_2 = { queue: false, duration: 400, easing: 'easeOutCubic' };

  $(this).find('.backward, .forward').each(function () {
    $(this).stop()
      .animate($(this).data('animate-on'), conf_1)
      .animate({ opacity: 0.95 }, conf_2);
  });
}, function() {
  var conf_1 = { queue: false, duration: 550, easing: 'easeOutSine' };
  var conf_2 = { queue: false, duration: 300, easing: 'easeOutSine' };

  $(this).find('.backward, .forward').each(function () {
    $(this).stop()
      .animate($(this).data('animate-off'), conf_1)
      .animate({ opacity: 0 }, conf_2);
  });
});