jQuery UI下降平滑過渡

我正在使用jQuery UI卡下拉插件來創建一個非常簡單的匹配遊戲。我想讓卡片的卡入過渡更平滑一點，這樣當您將正確的卡片放在正確的插槽上時，它會穩定地移動到位。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 
    }); 
    } 

}

來源

2013-10-22 user2879183

你能提供的jsfiddle演示？ –

@IvinvinDomininaka愛德華肯定，謝謝。 http://jsfiddle.net/AyN2a/ – user2879183

您可以使用jQuery UI position的using選項，它允許您設置位置應用動畫。

價：

類型：Function（）當指定時，實際的屬性設置是委託給此回調。接收兩個參數：第一個是應該設置的位置的頂部和左側值的哈希值，並且可以轉發到.css（）或.animate（）。第二個提供反饋關於兩個元素的位置和尺寸，以及計算它們的相對位置。目標和元素都具有以下屬性：元素，左，頂部，寬度和高度。此外，有水平，垂直和重要，給你12潛在的方向，如{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/

來源

2013-10-22 12:12:00

非常棒的隊友！非常感謝 – user2879183

@ user2879183歡迎您！ –

jQuery UI下降平滑過渡

回答

相關問題