Question

我创建了以下函数（与Rico StCruz genious jquery-transit plugIn一起使用）：

$.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的对象。

然后，您可以从top对象访问属性left，options或其他任何内容。但是，您需要在使用之前检查该属性是否存在。例如，要在函数中使用它之前检查top属性是否存在，您可以执行以下操作：

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

Answer 2

谢谢！我也想过这个。但在这种情况下，我将不得不做最后一个代码部分的3个完整版本（$ this.transition ...），一个有2个选项属性，一个只有第一个，一个只有第二个。我担心这会成为一段可怕的代码。： - （

有人知道f.e. jquery解决了这种函数，例如使用.animate（）函数。我无法想象在他们的情况下会有无穷无尽的情况，因为animate（）需要更多的参数并以这种方式提供所有组合几乎是不可能的。你知道我的意思吗？

在fn函数中集成各种属性

2 个答案: