Question

我做了以下小插件（由Rico St Cruz添加到query.transit）：

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

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

我用过它（没有回调我试图实现它到目前为止工作得很好）所以：

$("#someElement").translateLeft( 10.5, 300, 'easeOutSine', function() { 
                // do something else
            } );

这有助于使光滑的x平移而不是左边，但仍然可以设置引用父节点的％值（单独指向元素的x是不可能的）。这只是为了解释。

正如我所说它非常好，但我插入的回调却没有。我是否在语义上做错了什么？

感谢您的建议！格拉瓦尼

编辑：

到目前为止，感谢你的评论让我思考。实际上甚至在我的（初学者）fn代码中，如果我在那里放置例如alert（＆＃34; Callback＆＃34;）而不是其他代码，则回调实际上是有效的。因此，似乎无法将我的plugIn与任何类型的代码混淆。在这里完成我的问题是整个代码涉及即使我非常清楚它是非常复杂的并且会让你神经紧张。：

这是我喜欢使用插件的函数IN：

function switchMenuItem( id ) {

var $menuItem = $("#"+ id );

var $menu = $menuItem.parent();
var $menuImg = $menu.children(); //all siblings including selected element by id
var $prev = $menuItem.prev();
// calculate animation values
var index = $menuImg.index( $menuItem );    
var ww = $(window).width();
var cssLeftPx = parseInt( $menuItem.css('left') );      
var cssLeftPercent = 100 * cssLeftPx/ww;        

if ( index == 1 ) { var dur = ww/2.4; };        
if ( index == 2 ) { var dur = ww/1.5; };
$menuItem   .stop(true)
            .animate( { left: '10.5%' }, dur, 'easeOutSine', function() { 
                $(this)  .prependTo($menu );
            } );
$menuImg    .first()
            .stop(true)
            .animate( { left: cssLeftPercent+'%' }, dur, 'easeOutSine', function() { 
                $(this)  .insertAfter( $prev ); 
                $menuItem.siblings()
                         .animate( { opacity: 1 }, 150, 'linear' )
                         .css( { cursor: 'pointer' } );                 
                switchComplete = true;
                subReady = true;            
            } );
…

}

我希望摆脱查询动画，并在Rico St Cruz运输插件的帮助下用光滑的x平移代替它（在我之前用我的插件成功完成的方式：

$.fn.translateLeft = function( left, duration, easing, callback ) {

var $this  = $(this);
var currentLeftPx = parseInt( $this.css('left') );
var parentWidth = $this.parent().width();
// final left layout destination in px
var finalLeftPx = parentWidth/100 * left; 
// actual distances to final left layout destination in px
var distanceLeftPx = currentLeftPx - finalLeftPx;

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

}

因此，我想使用“平移左”来代替“动画”，它使用平滑的x平移，然后在末尾返回一个“清理”的css位置，以便它可以用于其他窗口大小调整等。

我有解释一下吗？任何建议都很受欢迎。提前谢谢！

使用回调创建fn函数

0 个答案: