Question

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

请告知这个noob ...谢谢！

      .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

最简单（也是最通用）的方法可能是使用HTML5数据属性将开始/停止动画状态存储为JSON数据。例如：

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

Answer 2

我不太确定html的结构应该是什么或应该发生什么，但这是你的意思（就变量而言？）？

var option = 'right'; // or option = 'left'
var classDirection = ".forward"; // or ".backward";
move(option, classDirection, 20);
function move(option, classDirection, changeDir}{
   var css = {opacity:0};

   var obj = {};
   obj[option] = 0;
   $.extend(css, obj); 

   var obj2 = {};
   obj2[option] = chaneDir;

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

如果它有帮助，我在jsfiddle上开始了一件事。至于使用数据属性（如果你真的想），我认为你可以使用$（'。forward）.attr（'data-dir'）访问它们;或某事。

http://jsfiddle.net/zBsXX/1/

如何为我的左右值使用HTML 5数据属性或变量？

2 个答案: