如何在每次点击时首先显示负载而不是内容

Question

我有一个使用 jquery 滚动技术的四链接菜单（主页 | 关于 | 解决方案 | 联系方式），每次点击 {Flesler's scrollTo 代码 : http://demos.flesler.com/jquery/serialScroll/} 和 {TKYK 历史插件 http://tkyk.github.com/jquery-history-plugin/}。好的，我的情况是，当我单击第二个链接“关于”时，它首先显示主页，而不是 setTimeout()，然后它显示正确的内容。无论如何隐藏以前的内容并显示某种“加载”然后显示新内容？

这是我的 init.js 代码：

函数调整大小（）{ var wdt = 1000; 变量 hgt = 500; 宽度 = $(窗口).wdt; 高度 = $(窗口).hgt; mask_width = 宽度 * $('.item').length; $('#debug').html(宽度 + ' ' + 高度 + ' ' + mask_width); $('#container,.item').css({width: width, height: height}); $('#mask').css({width: mask_width, height: height}); $('#container').scrollTo($('a.selected').attr('href'),0); }

$(document).ready(function() { //滚动x轴内容 $('a.panel').click(function() { $('a.panel').removeClass('selected'); $(this).addClass('selected'); 当前 = $(这个); $('#container').scrollTo($(this).attr('href'),1000,{ easing:'easeInOutCubic',queue:true,duration:1500,axis:'xy' }); 返回错误；

}); $(window).resize(function() { resize(); }); // hash history function load(num) { $('.content').load(num); } $.history.init(function(url) { load(url == "" ? "home" : url); }); $("a[rel='history']").click(function(e) { var url = $(this).attr('href'); url = url.replace(/^.*#/,"!/"); setTimeout(function() { $.history.load(url); },1000); return false; });

});

Answer 1

我没有确定问题，但我认为这会对您有所帮助：

$('a.panel').click(function() {
    $('a.panel').removeClass('selected');
    $(this).addClass('selected');
    $('a.panel').not($(this)).each(function() {
        $($(this).attr("href")).hide();
    });
    // show your loading here
    current = $(this);
    $(current.attr("href")).show()
    $('#container').scrollTo($(this).attr('href'),1000,{ easing:'easeInOutCubic',queue:true,duration:1500,axis:'xy', onAfter: function() { //hide your loading here } });
    return false;
});

这包括从菜单上的链接中隐藏所有容器，显示加载，显示您要显示的容器，然后隐藏加载。

编辑：

也许您甚至不需要加载...只需从 scrollTo 选项中删除 onAfter 即可。