jquery淡入淡出。

Question

大家好，剛剛用 jquery 做一些工作，剛剛有一個問題。 我在 div 中得到了一個圖像，想知道是否可以使用 jquery 通過給它一個 x 和 y 坐標來使該圖像在屏幕上彈出。 然后使用此代碼我可以讓它向右移動

$('#red').pan({fps: 30, 
speed: 0.5, dir: 'right'});

然后當它到達屏幕上的某個位置時讓它淡出。 關於這個問題的任何幫助都會很好，因為我對 jquery atm 不太好。

Answer 1

你可以嘗試這樣的事情：-

  $('#A').fadeOut( function() {
         $('#B').fadeIn();
       });

回調函數可以被第一個效果完成后運行的淡出采用

Answer 2

我會嘗試這樣的事情

function MoveAndFade(x, y)
{
    $('.box').fadeIn('slow', function ()
    {
        $(this).animate({ left: x, top: y }, 'slow', 'swing', function ()
        {
            $(this).fadeOut();
        });
    })    
}

基本上它會淡入div，然后將其移動到您指定的位置，然后淡出。 這將依次發生。

您需要將選擇器$('.box')更改為適合您的 div 的選擇器。 當前選擇具有“box”類的元素。 然后您可以傳入任何 x 或 y 值，例如： MoveAndFade(50,100); . 您還需要確保 div 具有position:absolute css 屬性。

您需要調用函數MoveAndFade傳入您想要的參數，例如

<input type="button" value="Click me" onclick='MoveAndFade(150,50);' />

或者，如果您想在 DOM 加載后運行，請執行以下操作：

$(document).ready(function(){
    $('.box').fadeIn('slow', function ()
    {
        $(this).animate({ left: '150', top: '50' }, 'slow', 'swing', function ()
        {
            $(this).fadeOut();
        });
    })    
});

或者

$(document).ready(function(){
    MoveAndFade(150,50);
});

其中MoveAndFade()是在$(document).ready(function(){})部分中定義的。