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() 指定すると、実際のプロパティ設定がこのコールバックに委譲されます。2 つのパラメーターを受け取ります。1 つ目は、設定する必要がある位置の上部と左側の値のハッシュで、.css() または .animate() に転送できます。2 つ目は、両方の要素の位置と寸法に関するフィードバックと、それらの相対位置の計算を提供します。ターゲットと要素の両方に、要素、左、上、幅、高さのプロパティがあります。さらに、水平、垂直、および重要があり、{ 水平: "中央"、垂直: "左"、重要: "水平" } のような 12 の潜在的な方向を示します。

お気に入り：

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 に答える