冲突对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(); 
    }); 
});