javascript - jQuery UI 平滑过渡

Question

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

她是一个 JSFiddle 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
    } );
  }

}

Answer 1

您可以使用 jQuery UI 的 using 选项 position ，它允许您在应用位置时设置动画。

引用:

Type: Function() When specified, the actual property setting is delegated to this callback. Receives two parameters: The first is a hash of top and left values for the position that should be set and can be forwarded to .css() or .animate(). The second provides feedback about the position and dimensions of both elements, as well as calculations to their relative position. Both target and element have these properties: element, left, top, width, height. In addition, there's horizontal, vertical and important, giving you twelve potential directions like { horizontal: "center", vertical: "left", important: "horizontal" }.

喜欢:

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

演示:http://jsfiddle.net/g6NZ9/1/