我有一个标题文本,我想将其淡入框中。 然后,字幕就会在其下方淡入。 一旦两者都可见,它们应该淡出,下一组应该以相同的方式淡入。
这是我创建的,但是,我怀疑它的运行情况,也就是说,它是否占用浏览器的 CPU 资源。我关心的问题之一也是 Javascript 的递归深度。
我有以下代码(我也将其与CSS和HTML一起包含在jsfiddle中http://jsfiddle.net/ukewY/1/)
var no = 3;
function fadeText(id) {
// Fade in the text
$("#text" + id).animate({
opacity: 1,
left: '+=50'
}, 5000, function() {
// Upion completion, fade in subtext
$("#subtext" + id).animate({
opacity: 1,
}, 5000, function() {
// Upon completion, fade the text out and move it back
$("#subtext" + id).animate({
opacity: 0,
}, 1000, function() {
$("#text" + id).animate({
opacity: 0,
left: '+=200'
}, 3000, function() {
// Yet again upon completion, move the text back
$("#text" + id).css("left", "19%");
$("#subtext" + id).css("left", "10%")
fadeText((id % no) + 1);
});
});
});
});
}
$(document).ready(function() {
fadeText(1);
});
我的问题是这是否是正确的方法?或者是否有更好的(也许是非递归的)方法来做到这一点?
PS。由于这是一个网站的横幅,我不担心id
太大,因为人们可能已经离开了。
最佳答案
递归对我来说似乎很好,但我还发现了一些其他事情:
- 您可能希望动态读取标题数量,而不必在脚本顶部指定它们。
- 您在每个标题中使用相同的选择器 $("#text"+ id) 和 $("#subtext"+ id) 两次。您应该只执行一次,并将其分配给一个变量。这意味着您只有一次函数调用,而不是两次。
- 您可能希望使用 eq() 选择器来消除 $("text"+ id) 的需要并使其更整洁
- 即使只有 1 个值(特别是“{opacity: 0,}”),您仍要传递给 animate() 一些以逗号结尾的数据映射。这会导致某些浏览器出现问题。
- 我不是 100% 确定,但我认为从内部调用函数本身是不好的,您应该使用 setTimeout (如果您需要向函数传递一些参数以避免使用 eval(),请使用匿名函数)
- > 我知道你说这并不重要,但是如果用户只是让你的页面保持打开状态(例如接听电话然后必须冲出去),则 id 可能会变得太大。他们不应该返回错误。
- 您可以使用 $(DO STUFF) 而不是 $(document).ready(DO STUFF)
我接受了这些,并随意将您的代码调整为以下内容:
function fadeText() {
thistext = $text.eq(titleid);
thissubtext = $subtext.eq(titleid);
thistext.animate({
opacity: 1,
left: '+=50'
}, 5000, function () {
thissubtext.animate({
opacity: 1
}, 5000, function () {
thissubtext.animate({
opacity: 0
}, 1000, function () {
thistext.animate({
opacity: 0,
left: '+=200'
}, 3000, function () {
thistext.css("left", "19%");
thissubtext.css("left", "20%");
if (titleid != $text.length - 1) {
titleid++;
} else {
titleid = 0;
}
setTimeout(fadeText, 0);
});
});
});
});
}
var titleid=0;
$(function () {
$text = $("span.floating-text");
$subtext = $("span.floating-subtext");
fadeText();
});
关于jquery - 使用 jQuery 使横幅像文本一样淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6648006/