衝突對jQuery的過渡.load

Question

朋友你好我有這樣的代碼在我的索引：

<script> 
$(".myLink").click(function(){ 
    var href = $(this).attr('href'); 
    $('#container').load(href); 
    $('#container').fadeTo(500, 1); 
    $("html, body").animate({ scrollTop: 0 }, "normal"); 
    return false; 
}); 
</script> 

它的工作原理EXCELENTE。 接下來，當#container的打開和ITSC加載的內容，我需要關閉它，所以我用下面的代碼#container的窗口內：

$("#container").click(function(){ 
    $('#container').fadeTo(500, 0); 
    var href = $('cont_nota').attr('href'); 
    $("#container").empty(); 
    $(this).unbind(fadeTo); 
    event.preventDefault(); 
}); 

再次一切就OK了，當我點擊窗口中的任何地方它會關閉#container（如預期的那樣），除非它不會淡出，它會突然關閉，我可以忍受這一點，但是我真正在努力的是：當我嘗試從＃號內打開一個新鏈接時，容器。它將新內容加載到自身（#container窗口）中，如預期的那樣，但現在它不會淡入，它會突然顯現。

這是我使用新的內容加載到同一個容器代碼：

$(".link").click(function(){ 
    var href = $(this).attr('href'); 
    $("#container").html(""); 
    $('#container').load(href); 
    $('#container').fadeTo(500, 1); 
    $("html, body").animate({ scrollTop: 0 }, "normal"); 
    return false; 
    event.preventDefault(); 
}); 

的東西可能是錯的任何想法？ 感謝您的任何見解。

Answer 1

由於JS正在工作asynchronously,fadeTo函數不會阻塞其他行的執行。因此，執行第一行後，您的代碼立即開始執行其他行而不是fadeTo方法結束。

因此，如果您想等待完成淡入淡出，您應該在回調函數中編寫代碼。這裏是documentation的使用fadeTo功能與回調。

所以你的函數鏈應該是這樣的：

$("#container").click(function(){ 
    $('#container').fadeTo(500, 0, function() { 
     var href = $('cont_nota').attr('href'); 
     $("#container").empty().css('opacity','100'); 
     $(this).unbind(fadeTo); 
     event.preventDefault(); 
    }); 
});