代码之家 › 专栏 › 技术社区 › Rich Bradshaw

jquery淡入Ajax加载的DIV不平滑

html jquery javascript

Rich Bradshaw · 技术社区 · 15 年前

在本地运行以下内容时,淡入非常顺利,但在远程服务器上,加载到目标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>

1 回复 | 直到 12 年前

James 15 年前

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

3 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

3 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

3 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前