如何使用变量或数据来更改左值或右值

Question

我有两个几乎相同的动画......它们之间的区别是“左对右”定位。我想为.forward和.backward重复使用第一块代码...我猜这可以通过使用数据或者变量来完成，但是我不知道如何去做。

感谢您的帮助

$('.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

您可以创建一个新的jQuery函数和变量传递关于这两段代码之间的每一个差异。

$.fn.setupAnimation = function(selector, direction) { 
    return this.hover(function() { 
     var startData = {}; 
     startData[direction] = 20; 

     $(this).find(selector).stop() 
      .animate(startData, {queue:false, duration:300, easing:'easeOutCubic'}) 
      .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'}); 
    }, function() { 
     var startData = {}; 
     startData[direction] = 0; 

     $(this).find(selector).stop() 
      .animate(startData, {queue:false, duration:550, easing:'easeOutSine'}) 
      .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'}); 
    }); 
} 

$('.hover-area').setupAnimation('.forward', 'right'); 
$('.hover-area').setupAnimation('.backward', 'left');