开发者

jQuery fade in ajax loaded div isn't smooth

开发者 https://www.devze.com 2022-12-22 05:16 出处:网络
When running the following locally, the fade in is very smooth, but on a remote server the content loaded into the target div appears, is instantly hidden, and then fades back in again.

When running the following locally, the fade in is very smooth, but on a remote server the content loaded into the target div appears, is instantly hidden, and then fades back in again.

Why does this happen and how do I fix it?

My jQuery (inside the document.ready stuff) looks like this:

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

My HTML looks like this:

        <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>                        开发者_如何学JAVA        
        </ul>

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

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


You don't want the fading to start before the content has loaded, so you should pass a callback to .load():

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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号