Question

我正在使用jQuery UI卡drop插件来创建一个非常简单的匹配游戏。我想让卡的卡扣过渡更平滑，这样当你将正确的卡放在正确的插槽上时，它会稳定地移动到位。

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

// 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 position的using选项，它允许您在应用位置时设置动画。

价：

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

像：

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/

jQuery UI平滑过渡

1 个答案: