在fn函数中集成各种属性

Question

我创建了以下函数（与Rico StCruz灵巧的jquery-transit插件一起使用）：

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

将可用。

Answer 1

您的函数需要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
}

Answer 2

谢谢！ 我也考虑过这一点。 但是在这种情况下，我将必须完成最后一个代码部分（$ this.transition…）的3个完整版本，一个具有2个选项属性，一个仅具有第一个选项属性，一个仅具有第二个选项属性。 恐怕这将成为可怕的代码。 :-(

有人知道fe jquery如何解决此类功能，例如使用其.animate（）函数。 我无法想象它们中有无数种情况，因为animate（）需要更多的参数，并且以这种方式提供所有组合几乎是不可能的。 你懂我的意思吗？