javascript - 为什么当我使用外部页面时我的 jquery 不工作

Question

我使用 jquery 加载 2 个外部页面，一个称为 search.php，另一个称为 info.php。我将它们分别显示在一个名为 user.php 的页面上，但仅当在导航栏中单击了链接时才显示。不幸的是，当我使用这部分脚本时，我目前遇到了一个问题:

$(document).ready(function() {
$('#content_area').load($('.menu_top:first').attr('href'));
});


$('.menu_top').click(function() {
var href = $(this).attr('href');
$('#content_area').hide().load(href).fadeIn('normal');

return false;
});

在更改内容之前，我的页面似乎闪烁并停顿了 2 秒。我注意到但是如果我删除 .hide 和 fadeIn 它似乎工作正常。我怎样才能仍然使用淡入但消除停顿和闪烁？

Answer 1

jQuery 将 .fadeIn、.hide 和其他效果添加到它的效果队列中。因此它会在将 .hide 发送到效果的队列/并且 .hide 未完成后立即调用 .load()。

您可以对 .hide 方法进行回调:

$('#content_area').hide(function(){
    $('#content_area').load(href).fadeIn('normal');
})

这允许隐藏先完成。