问题描述
|
我有四个链接菜单（主页|关于|解决方案|联系人），每次单击{Flesler's scrollTo代码：http://demos.flesler.com/jquery/serialScroll/}都使用jquery滚动技术，并带有{TKYK历史记录插件http://tkyk.github.com/jquery-history-plugin/}。好的，我的情况是，当我单击第二个链接“关于”时，它首先显示主页，而不是setTimeout（），然后显示正确的内容。无论如何，有没有隐藏以前的内容并显示某种类型的“加载”，然后显示新内容？
这是我的init.js代码：
函数resize（）{
var wdt = 1000;
var hgt = 500;
宽度= $（window）.wdt;
高度= $（窗口）.hgt;
mask_width =宽度* $（\'。item \'）。length;
$（\'＃debug \'）。html（width + \'\'+ height + \'\'+ 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 \'）;
当前= $（this）;
$（\'＃container \'）。scrollTo（$（this）.attr（\'href \'），1000，{缓动：\'easeInOutCubic \'，队列：true，持续时间：1500，轴：\'xy \'}）;
返回false；
});
$(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;
});
解决方法
我确实没有遇到问题，但是我认为这会帮助您：
$(\'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;
});