jQuery UI 在下降时平滑过渡

我正在使用 jQuery UI 卡牌掉落插件创建一个非常简单的配对游戏。我想让卡掉落的捕捉过渡更加平滑，这样当您将正确的卡掉落到正确的插槽上时，它就会稳定地移动到位。

她是一个 JSFiddlehttp://jsfiddle.net/AyN2a/ http://jsfiddle.net/AyN2a/

任何帮助将非常感激。谢谢。

// Create the slots
var words = [ '<img src="images/image1.png" width="200px" height="200px" alt="">', '<img src="images/image2.png" width="200px" height="200px" alt="">', '<img src="images/image3.png" width="200px" height="200px" alt="">', '<img src="images/image4.png" width="200px" height="200px" alt="">', '<img src="images/image5.png" width="200px" height="200px" alt="">', '<img src="images/image6.png" width="200px" height="200px" alt="">', '<img src="images/image7.png" width="200px" height="200px" alt="">'];
for ( var i=1; i<=7; i++ ) {
  $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
    accept: '#cardPile div',
    hoverClass: 'hovered',
    drop: handleCardDrop
  } );
} 

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  if ( slotNumber == cardNumber ) {
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
  } 

  if ( correctCards == 7 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      width: '150px',
      height: '150px',
      opacity: 1
    } );
  }

}

您可以使用usingjQuery UI 的选项position http://api.jqueryui.com/position/，它允许您在应用位置时设置动画。

Ref:

类型：Function() 指定时，实际属性设置为 委托给此回调。接收两个参数：第一个是 应设置的位置的顶部和左侧值的哈希值 可以转发到 .css() 或 .animate()。第二个提供反馈 关于两个元素的位置和尺寸，以及 计算它们的相对位置。目标和元素都有 这些属性：元素、左、顶部、宽度、高度。此外， 有水平的、垂直的和重要的，给你十二个 潜在的方向，例如{水平：“中心”，垂直：“左”， 重要：“水平”}。

Like:

ui.draggable.position({
    of: $(this),
    my: 'left top',
    at: 'left top',
    using: function (css, calc) {
        $(this).animate(css, 200, 'linear');
    }
});

Demo: http://jsfiddle.net/g6NZ9/1/ http://jsfiddle.net/g6NZ9/1/