4

我正在使用 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
    } );
  }

}
4

1 回答 1

3

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

参考：

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

喜欢：

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/

于 2013-10-22T12:12:00.357 回答