jQuery UI平滑过渡 [英] jQuery UI smooth transition on drop

问题描述

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

I'm using the jQuery UI card drop plugin to create a very simple match up game. I want to make the snapping transition of the card dropping a bit smoother so that when you drop the correct card over the correct slot it moves into place steadily.

她是一个JSFiddle http://jsfiddle.net/AyN2a/

Her's a JSFiddle http://jsfiddle.net/AyN2a/

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

Any help would be much appreciated. Thanks.

// 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 位置的使用选项，它允许您在申请职位时设置动画。

You can use the using option of jQuery UI position, it allows you to set an animation on position applying.

参考：

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

Type: Function() When specified, the actual property setting is delegated to this callback. Receives two parameters: The first is a hash of top and left values for the position that should be set and can be forwarded to .css() or .animate(). The second provides feedback about the position and dimensions of both elements, as well as calculations to their relative position. Both target and element have these properties: element, left, top, width, height. In addition, there's horizontal, vertical and important, giving you twelve potential directions like { 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/

这篇关于jQuery UI平滑过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！