JQuery fade в ajax загружен div не является гладким
При запуске следующего локально, fade in является очень плавным, но на удаленном сервере отображается содержимое, загруженное в целевой 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 & 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 & 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>
1
1 ответ
Вы не хотите, чтобы затухание начиналось до того, как содержимое загрузилось, поэтому вы должны передать обратный вызов на .load()
:
$(".dataclick").click(function() {
$('.clicktarget').hide().load($(this).attr("href"), function(){
$(this).fadeIn("slow");
});
return false;
});
5
Другие вопросы по меткам javascript jquery html или Задайте вопрос