在JQuery加載之前運行動畫

我試圖利用JQuery的load()函數，我很疑惑爲什麼動畫不會發生之前的加載請求。在JQuery加載之前運行動畫

舉例來說，如果我有一個腳本，上面寫着：

$('#clickme').click(function() { 
    $('#content').slideUp(500); 
    $('#content').slideDown(500); 
});

http://jsfiddle.net/593cC/

然後，這也正是發生了什麼。它向上滑動，然後滑落。但是，如果我在這兩行之間放置了一個load()函數，它將完全忽略第一條動畫行，並僅執行其餘行。

$('#clickme').click(function() { 
    $('#content').slideUp(500); 
    $('#content').load('myotherpage.php').hide(); 
    $('#content').slideDown(500); 
});

http://jsfiddle.net/593cC/1/

這是爲什麼？我曾嘗試將delay()放在操作上，但沒有成功。我能做些什麼來防止這種情況發生，所以我的事件會有很好的效果？

非常感謝，SO

來源

2013-05-01 RCNeil

他們很可能正在運行的同步 – 2013-05-01 17:38:17

可能。我一直認爲JQuery接連接受訂單...... – RCNeil 2013-05-01 17:40:03

嘗試使用load裏面你slideUp功能的回調：

$('#content').slideUp(500 ,function() { 
    $('#content').load('myotherpage.php').hide(); 
});

Updated Fiddle

來源

2013-05-01 17:40:52 Eli

不錯。這是一個很棒的提示。我最終在加載後將slideDown（）函數嵌套爲回調函數，以確保一切順利進行。將標記爲已接受。謝謝！ – RCNeil 2013-05-01 17:44:02

試試這個：

$('#content').slideUp(500).load('myotherpage.php', function() { 
    $('#content').slideDown(500); 
});

來源

2013-05-01 17:44:38

它做正確的效果基本show，然而，si nce .load清空元素，看起來好像它立即發生，因爲元素的高度突然變爲0 +填充。

我建議不使用.load這裏：

$('#clickme').click(function() { 
    // get data 
    var request = $.get("myotherpage.php"); 
    $('#content').slideUp(500,function(){ 
     // when request is done AND the element is hidden, apply content and slide it back down. 
     request.done(function(html){ 
      $('#content').html($.parseHTML(html)).slideDown(500); 
     }); 
    }); 
});

這導致在那裏是效果基本show和了slideDown之間沒有延遲，只要請求需要500ms以內。

來源

2013-05-01 17:45:15

感謝Kevin的解釋。非常感謝。 – RCNeil 2013-05-01 17:51:15

將您的負載放在回調中的slideup回調和slidedown內部（因爲它是異步的）。 http://jsfiddle.net/cwSXa/

.load()

$(document).ready(function() { 

    $('#clickme').click(function() { 
     $('#content').slideUp(500, function() { 
      $('#content').load('myotherpage.php', function() { 
       $('#content').slideDown(500); 
      }); 
     }); 
    }); 
});

來源

2013-05-01 17:45:39 PSL

在JQuery加載之前運行動畫

回答

相關問題