JQuery淡入淡出循环问题
我正在尝试使用下面的代码为我的页面内容创建一个jQuery淡入淡出效果。JQuery淡入淡出循环问题
$(document).ready(function(){
$("#main").click(function(){
$("#content").fadeOut(800, function(){
$("#content").load("main.html", function(){
$("#content").fadeIn(800);
});
});
});
$("#gallery").click(function(){
$("#content").fadeOut(800, function(){
$("#content").load("gallery.html", function(){
$("#content").fadeIn(800);
});
});
});
});
因此,只要用户点击通过主链路或画廊链接,旧的内容淡出,新内容变淡。我现在面临的问题是,对每一个环节我不得不再次重复同样的代码然后再次。所以我试图用一个循环来简化它,但它不起作用。这里是我的代码:
var p = ["#main","#gallery", "#contact"];
var q = ["main.html", "gallery.html", "contact.html"];
for (i=0;i<=(p.length-1);i++){
$(p[i]).click(function(){
$("#content").fadeOut(500, function(){
$("#content").load(q[i], function(){
$("#content").fadeIn(500);
});
});
});
}
当我写重复每个链接中的脚本,但是当我在一个循环将它们组合起来这是行不通的,它工作正常。我只获得FadeOut效果,之后没有任何反应。
这可能是一个非常简单的问题,或者可能是深入jQuery的东西。任何提示或帮助,不胜感激。
TK
你必须捕捉i
或q[i]
当前值的函数在一个单独的封闭,如:
function buildChangeOverTo(src)
{
return function() {
var content = $("#content");
content.fadeOut(500, function(){
content.load(src, function(){
content.fadeIn(500);
}});
}
}
var p = ["#main","#gallery", "#contact"];
var q = ["main.html", "gallery.html", "contact.html"];
for (i=0;i<=(p.length-1);i++) {
$(p[i]).click(buildChangeOverTo(q[i]));
}
有关于这些奇怪的JavaScript关闭在网络上吨信息吨。
您的变量i是在3总是评价,这使得Q [I]未定义。你必须找到一种方式,就像一个类可能会保持与回调相关的数字一样。
如果它真的只是三个环节,我会建议一些更简单的案例陈述。
switch $(this).attr('id') {
case 'gallery' : ; break;
case 'contact' : y; break;
case 'main' : z; break;
}
,如果你担心重复代码只写一个接受什么网页加载并调用它在每个。点击()
我将此标记为答案以及..谢谢你Nathan – Tarun 2010-06-17 17:18:12
我会通过向链接添加一个类来解决这个问题,比如说fadeLink,我会为fadeUrl等链接添加一个自定义属性。我想设置每个路段的路段目的地到fadeUrl属性,然后你的文件准备的代码看起来是这样的:
$(document).ready(function(){
$(".fadeLink").click(function(){
var jqThis = $(this);
$("#content").fadeOut(800, function(){
$("#content").load(jqThis.attr("fadeUrl"), function(){
$("#content").fadeIn(800);
});
});
});
});
这侧步循环,在未来你只需要添加或编辑链接改变链接上的数据。
谢谢帕特里克.. – Tarun 2010-06-17 17:18:33
我现在明白了..我想我的javaScript技能不如我以为他们是..谢谢维客 – Tarun 2010-06-17 17:17:38