slide div offscreen，使用ajax調用附加內容，在屏幕上滑動div

我有一個div，它位於包含通過jquery ajax調用加載的文本的頁面上。當按鈕被點擊它刷新該DIV的內容：slide div offscreen，使用ajax調用附加內容，在屏幕上滑動div

randomEntry = function() { 
    $.ajaxSetup({ 
     cache: false 
    }); 

    $('article#portraits').load('random.php'); 
    $('#refresh').click(function() { 
     event.preventDefault(); 
     $('article#portraits').load('random.php'); 
    }); 
};

我現在想要做的是，當按下按鈕動畫股利，按以下順序：

按鈕按下
DIV從右移到屏幕外左側
格內容更新
分度，由右至左在屏幕上的新內容移動。

This example完美地展示了視覺效果。我已經看過代碼，並能夠用兩個div來複制效果，每個div都包含獨特的內容，但我正努力將ajax調用加載到第二個div中。

這是我迄今爲止 - 這顯然不正確，因爲在div之前新的內容加載開始移動：

$('#refresh').click(function() { 
    event.preventDefault(); 
    $('article#portraits').animate({ 'margin-left' : "-100%" },1500); 
    $('article#portraits').load('random.php'); 
    $('article#portraits').animate({ 'margin-right': "-100%" }, 1500); 
};

我懷疑的load（）ISN（並且不回來！）這裏沒有正確的功能，也許需要第二個空格來加載內容，但我有點難住。一個jsfiddle的html/css can be found here。非常感謝。

來源

2012-05-24 mrcollioni

您需要使用"complete"callbacks：

$('#refresh').click(function() { 
    event.preventDefault(); 
    $('article#portraits').animate({ 'margin-left' : "-100%" },1500, function() { 
     $('article#portraits').load('random.php', function() { 
      $('article#portraits').animate({ 'margin-right': "-100%" }, 1500); 
     ); 
    ); 
};

來源

2012-05-24 18:34:48 Blazemonger

謝謝，這似乎解決了'DIV'前阿賈克斯查詢負載已經移出屏幕。然而，我認爲我的代碼引入新內容是有缺陷的，因爲它激發了左側的_same div_。我認爲它可能需要一個新的div來追加內容，與視覺示例一樣。（http://jsfiddle.net/jtbowden/ykbgT/2/） – mrcollioni

更仔細地在original example我張貼，並在@ Blazemonger的回答，下面似乎達到預期的效果：

將random.php加載到＃box1中：

randomEntry = function() { 
    $.ajaxSetup({ 
    cache: false 
    }); 
    $('#box1').load('random.php'); 
};http://www.readability.com/mrfredhale/

移動＃BOX1關閉屏幕時，點擊

animateBox = function() { 
    $('.box').click(function() { 
     $(this).animate({ 
      left: '-50%' 
     }, 500, function() { 
      $(this).css('left', '150%'); 
      $(this).appendTo('article#portraits'); 
     });

負載random.php到＃BOX2和移動它在屏幕上。使用$(this.next)意味着當＃box2處於焦點時，random.php加載到＃box1中，反之亦然。
```
$(this).next().load('random.php').animate({ 
     left: '50%' 
    }, 500); 
    }); 
}; 
```

來源

2012-05-26 16:26:36 mrcollioni

slide div offscreen，使用ajax調用附加內容，在屏幕上滑動div

回答

相關問題