下载时jQuery UI平滑过渡
我正在使用jQuery UI卡drop插件来创建一个非常简单的匹配游戏。 我想让卡的卡扣过渡更平滑，这样当你将正确的卡放在正确的插槽上时，它会稳定地移动到位。
她的JSFiddle http://jsfiddle.net/AyN2a/
任何帮助将非常感激。 谢谢。
// Create the slots var words = [ '
', '
', '
', '
', '
', '
', '
']; for ( var i=1; i<=7; i++ ) { $('' + words[i-1] + '').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选项，它允许您在应用位置时设置动画。
参考：
类型：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/