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
    } );
  }

}

- user2879183

---

你能在jsfiddle上提供一个演示吗？ - Irvin Dominin

@IrvinDomininakaEdward 当然，谢谢。http://jsfiddle.net/AyN2a/ - user2879183

Answer 1

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

参考：

Type: Function()当指定时，实际属性设置将委托给此回调函数。接收两个参数：第一个是应设置的位置的上下左右值的哈希，可以转发到.css()或.animate()。第二个提供有关两个元素的位置和尺寸以及它们相对位置的计算的反馈。目标和元素都具有这些属性：element、left、top、width、height。此外，还有水平、垂直和重要性，为您提供了12个潜在方向，例如{ 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/

- Irvin Dominin