Question

我有两个实际上完全相同的动画......它们之间的区别是“左右对齐”定位。我想重用.forward和.backward的第一个代码块...我猜这可以通过使用HTML 5数据属性或变量来完成，但我不知道如何走吧。

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

Answer 1

使用.data()函数获取数据属性并在.animate()中使用它们：

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

这是 DEMO 。

Answer 2

这似乎是CSS3转换动画的一个很好的候选者。添加单个类forward或backward，不包含所有数据属性，并使用CSS指定动画属性。

.goforward {
    left: 20px;
    transition-property: left;
    transition-duration: 3s;
}

然后只需添加/删除该类即可开始动画：

$(".forward").addClass("goforward");

演示：http://jsfiddle.net/EMUcV/1/

使用data-attributes来减少标记

2 个答案: