0

我有两个几乎相同的动画......它们之间的区别是“左右”定位。我想为 .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">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'});
        });
4

2 回答 2

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'});
});
于 2012-05-26T20:10:32.440 回答
0

我不太确定 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/

于 2012-05-26T19:50:45.513 回答