如何使用變量或數據來更改左值或右值

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