0

我在这里使用此代码在一组选项卡中切换特定类别的内容。这是一个屏幕截图：

在此处输入图像描述

淡入淡出效果很好，尽管在新页面的淡入效果已经开始之后我可以看到新页面“正在加载”。这是在缓慢过渡的基础上设置的！似乎褪色效果与页面加载完全无关，我认为这会让事情变得很糟糕。有没有办法让过渡更顺畅？

这是代码：

jQuery(document).on("click",".nav-tab", function(e){ 
    e.preventDefault();
jQuery('.page-form').fadeOut('slow').load(jQuery(this).attr('href') + ' .page-form');
jQuery('.page-form').fadeIn('slow').load(jQuery(this).attr('href') + ' .page-form');
});
4

1 回答 1

1

你的第二个电话：

jQuery('.page-form').fadeIn('slow').load(jQuery(this).attr('href') + ' .page-form');

必须在第一次调用的完成回调中发生，如下所示：

jQuery('.page-form').fadeOut('slow')
    .load(jQuery(this).attr('href') + ' .page-form', function() {
        jQuery('.page-form').fadeIn('slow')
            .load(jQuery(this).attr('href') + ' .page-form');
        });

原因是大多数 jQuery 函数都是异步工作的：您可能认为调用会阻塞，直到加载内容，但事实并非如此——调用立即返回，内容在后台加载。这会导致您看到的奇怪效果 - div 淡入淡出并同时加载两次。

编辑：顺便说一句，你为什么load()在第一个之后做第二个？这对我来说有点奇怪——我假设你想让元素淡出，然后加载新内容，然后再次淡入？

另请注意，fadeOut()接受类似于的回调load()- 因此，如果您希望在加载开始之前完成淡入淡出，请将第一个load()放在回调中并将其传递给fadeOut()-call。

于 2013-01-28T21:54:34.203 回答