集成在Fn功能的各種屬性

我創建了以下功能（與波多黎各StCruz天才要比jQuery的中轉插件使用）：集成在Fn功能的各種屬性

$.fn.translateLeftTop = function(left, top, duration, easing) { 
    var $this = $(this); 
    var currentLeftPx = parseInt($this.css('left')); 
    var currentTopPx = parseInt($this.css('top')); 
    var parentWidth = $this.parent().width(); 
    var parentHeight = $this.parent().height(); 
    // final left layout destination in px 
    var finalLeftPx = parentWidth/100 * left; 
    var finalTopPx = parentHeight/100 * top; 
    // actual distances to final left/top layout destination in px 
    var distanceLeftPx = currentLeftPx - finalLeftPx; 
    var distanceTopPx = currentTopPx - finalTopPx; 

    $this.transition({ x: -distanceLeftPx, y: -distanceTopPx }, duration, easing, function() { 
     $this.stop(true).css({ left: left +'%', top: top +'%', x: 0, y: 0 }); 
    }); 
}

我反而喜歡用它如下：

$("#element").translateLeftTop({ left: '5%', top: '5%' }, 500, 'easeOutSine')

，並保持開放的羯羊兩個值或僅由一個代碼，這樣也

$("#element").translateLeftTop({ left: '5%' }, 500, 'easeOutSine')

或

$("#element").translateLeftTop({ top: '5%' }, 500, 'easeOutSine')

可以使用。

來源

2014-06-22 Garavani

你的函數需要3個參數，而不是4你如何概述它。

您當前有function(left, top, duration, easing){...，但是您改爲想要擁有function(options, duration, easing)，其中options是一個對象。

然後，您可以從options對象訪問屬性top，left或其他任何您想要的對象。但是，在使用它之前，您需要檢查該屬性是否存在。例如，要檢查是否top屬性在函數中調用它之前就存在，你可以這樣做：

if (options.hasOwnProperty('top')) { 
    // do something with options.top 
}

來源

2014-06-22 08:39:53 Tomanow

謝謝！我也考慮過這個問題。但在這種情況下，我必須完成最後一個代碼部分（$ this.transition ...）的3個完整版本，其中一個具有2個選項屬性，一個只有第一個，另一個只有第二個。我恐怕這會變成一段可怕的代碼。 :-(

是否有人知道fejquery如何解決這類函數，例如使用它們的.animate（）函數我無法想象其中有無數的其他情況，因爲animate（）需要很多更多的參數和以這種方式提供的所有組合幾乎是不可能的。你知道我的意思嗎？

來源

2014-06-22 11:11:21 Garavani

集成在Fn功能的各種屬性

回答

相關問題