使用 .click 时无法使用 .fadeIn 加载外部页面

Question

////////////////////////

这对我来说确实是一个糟糕的方法。经过多次调整，我得出一个结论，最好一次加载所有外部元素 (html)，并且只在单击时应用淡入效果，而不是同时尝试加载外部页面。下面的方法没有产生平滑的淡入淡出效果并在加载外部页面时导致延迟。

////////////////////////

我正在通过以下方式加载外部页面：

$('a').click(function() {
$('#result').load($(this).attr('href'));

return false;
});

我正在尝试使用fadeIn 加载外部页面。

我查看了其他答案，但没有一个对我有用。也许我没有正确理解答案或错误地应用它。到目前为止，我最大的努力（经过无数次尝试）是这样，但这首先会在 div #one 中消失，然后只是加载 #load。 （我这样做是因为我知道我不能对加载 div 本身应用淡入淡出效果。）

$("a").click(function () {
$("#one:hidden:first").fadeIn("slow");
$('#load').load($(this).attr('href'));

return false;
});

我对 jQuery 很陌生，这对于除我之外的其他人来说可能非常简单。

我非常感谢任何帮助。谢谢。

//////////////////这里是标记////////////////

<a href="./test.html" class="link">Load Page 1</a>

<div id="one">

<div id="load">load here</div>


</div>

/////////////////////////////////////// /////////////

Answer 1

<a href="./test.html" class="link">Load Page 1</a>

<div id="one" class="slot">
  <div id="load">load here</div>
</div>

最初隐藏 div

.slot{
 display:none;
}

加载外部内容

   $(".link").click(function (e) {
     e.preventDefault();      
    var $urlToLoad = $(this).attr('href');  
    $('#load').load($urlToLoad, function(data){
        $("#one").fadeIn('slow');
    });      
});

DEMO