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和其他效果添加到它的效果队列中。因此它会立即调用.load（）它将.hide发送到效果的队列/并且.hide没有完成。

您可以在.hide方法上进行回调：

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

这允许隐藏首先完成。

Answer 2

尝试使用.stop进行试验，看看它是否有助于闪烁：

$('#content_area').hide().stop(true,true).load(href).stop(true,true).fadeIn('normal');

Answer 3

用于闪烁使用animate而不是fadeIn或fadeOut

用于淡出

  $("youeSelector").animate({ opacity: 0 }, 'slow');

对于fadein

  $("youeSelector").animate({ opacity: 1 }, 'slow');

并且就第二个问题而言，确保您没有包括两次脚本文件

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

3 个答案: