jQuery淡入ajax加载div不流畅

Question

在本地运行以下内容时,淡入非常平滑,但在远程服务器上,加载到目标div中的内容会立即隐藏,然后再次淡入.

为什么会发生这种情况,我该如何解决？

我的jQuery(在document.ready内部)看起来像这样:

$(".dataclick").click(function()
{
    $('.clicktarget').hide().load($(this).attr("href")).fadeIn("slow");
    return false;
});

我的HTML看起来像这样:

        <ul>
            <li><a class="dataclick" href="/data/lameness.html">Lameness Investigations</a></li>
            <li><a class="dataclick" href="/data/xrays.html">Xrays &amp; Ultrasonography</a></li>                               
            <li><a class="dataclick" href="/data/shockwave.html">Shockwave Therapy</a></li>
            <li><a class="dataclick" href="/data/prepurchase.html">Pre-Purchase Examinations</a></li>
            <li><a class="dataclick" href="/data/vettings.html">Vettings</a></li>                               
            <li><a class="dataclick" href="/data/reproduction.html">AI &amp; Full Reproductive Service</a></li>
            <li><a class="dataclick" href="/data/endoscopy.html">Endoscopy</a></li>
            <li><a class="dataclick" href="/data/acupuncture.html">Acupuncture</a></li>
            <li><a class="dataclick" href="/data/dentistry.html">Full Dentistry Service</a></li>
            <li><a class="dataclick" href="/data/castration.html">Castrations</a></li>                              
            <li><a class="dataclick" href="/data/gastroscopy.html">Gastroscopy</a></li>
            <li><a class="dataclick" href="/data/ridingschool.html">Riding School Inspection</a></li>
            <li><a class="dataclick" href="/data/24hremergency.html">24hr Emergency Service</a></li>                                
        </ul>

        <p>For more information on each service please click the relevant title/link.</p>
        </div>

        <div class="clicktarget">
        </div>

Answer 1

您不希望在内容加载之前启动淡入淡出,因此您应该将回调传递给.load():

$(".dataclick").click(function() {
    $('.clicktarget').hide().load($(this).attr("href"), function(){
        $(this).fadeIn("slow");
    });
    return false;
});