jQuery UI 在下降时平滑过渡

jQuery UI smooth transition on drop

本文关键字：平滑 UI jQuery      更新时间：2023-09-26

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

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

裁判：

类型：函数（） 指定时，实际属性设置为 委托给此回调。接收两个参数：第一个是 应设置的位置的顶部和左侧值的哈希值，以及 可以转发到 .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/

相关文章：