帮助在页面加载时淡入列表
因此,我一直在尝试在页面加载时淡入由 4 个链接组成的列表,一个接一个地垂直淡入,中间有一个延迟,使用:
$(document).ready(function() {
function fadeItem() {
$('ul li:hidden:first').delay(500).fadeIn(fadeItem);
列表中的链接当前不受页面加载时上述脚本的影响。
我认为,我的问题是,我将列表中的每个项目单独定位为绝对值
,或者,
我已经运行了一个涉及 li 类的脚本,我试图连续淡入淡出,导致两个脚本之间发生冲突。
我已经运行的 jQuery 脚本没有任何问题:
<script type>
$(document).ready(function() {
$('#thumb ul li a').hover(
function() {
var currentBigImage = $('#gallery img').attr('src');
var newBigImage = $(this).attr('src');
var currentThumbSrc = $(this).attr('rel');
switchImage(newBigImage, currentBigImage, currentThumbSrc);
},
function() {}
);
function switchImage(imageHref, currentBigImage, currentThumbSrc) {
var theBigImage = $('#gallery img');
if (imageHref != currentBigImage) {
theBigImage.fadeOut(250, function(){
theBigImage.attr('src', imageHref).fadeIn(250);
var newImageDesc = $("#thumb ul li a img[src='"+currentThumbSrc+"']").attr('alt');
$('p#desc').empty().html(newImageDesc);
});
}
}
});
</script>
我还在习惯 jQuery,所以有问题的脚本可能是完全错误的。据我了解, $(document).ready(function() {
首先加载项目,然后执行函数。如果有更好的方法在页面加载时淡出 li 类,任何帮助将不胜感激,谢谢。
So I've been trying to fade in a list of 4 links on page load, vertically one after the other with a delay in between using:
$(document).ready(function() {
function fadeItem() {
$('ul li:hidden:first').delay(500).fadeIn(fadeItem);
links in list are currently not effected by the above script on page load.
My problem, I think, is that I have each item in the list individually positioned with an absolute value
or,
I already have a script running involving the li classes I'm trying to consecutively fade causing a conflict between the two scripts.
The jQuery script I'm already running with no problems:
<script type>
$(document).ready(function() {
$('#thumb ul li a').hover(
function() {
var currentBigImage = $('#gallery img').attr('src');
var newBigImage = $(this).attr('src');
var currentThumbSrc = $(this).attr('rel');
switchImage(newBigImage, currentBigImage, currentThumbSrc);
},
function() {}
);
function switchImage(imageHref, currentBigImage, currentThumbSrc) {
var theBigImage = $('#gallery img');
if (imageHref != currentBigImage) {
theBigImage.fadeOut(250, function(){
theBigImage.attr('src', imageHref).fadeIn(250);
var newImageDesc = $("#thumb ul li a img[src='"+currentThumbSrc+"']").attr('alt');
$('p#desc').empty().html(newImageDesc);
});
}
}
});
</script>
I'm still getting used to jQuery so the script in question might be totally wrong. From what I understand, $(document).ready(function() {
loads items first then carries out the function(s). If there is a better way of fading in li classes on page load, any help would be greatly appreciated, thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您正在该文档中定义
fadeItem()
,但由于您没有粘贴整个内容,我不确定您是否真的调用它?从准备好的文档中调用fadeItem()
应该足以启动该过程。直接写可能会更容易:
这样该函数在文档准备好时被调用,并且仍然可以调用自身。
另外,考虑您在某些评论中的回应 -
:hidden
选择器 只会查找display: none
或宽度和高度为 0 的元素(并且输入隐藏,但这不适用于ul li
。)您可能在搜索隐藏项目之前需要实际隐藏项目......
You're defining
fadeItem()
in that document ready, but since you didn't paste the whole thing, I'm not sure you are ever actually calling it? CallingfadeItem()
from the document ready should suffice to kick the process into gear.It might be easier to just write:
That way the function is called on document ready, and can still call itself.
Also, considering your response in some of the comments - the
:hidden
selector will only find elements that aredisplay: none
, or a width and height of 0 (and input hidden, but that doesn't apply toul li
.)You might need to actually HIDE the items before you search for hidden items...
如果您希望函数 fadeItem() 在文档就绪时执行,则还必须立即执行它。您是否尝试过这个(为什么将 fadeIitem 函数作为参数传递给 fadeIn()?第一个参数应该是淡入淡出的持续时间):
否则不要将淡入淡出放入函数中。
If you want your function fadeItem() to be executed on document ready, you must also execute it instantly. Have you tried this (why did you pass fadeIitem function as a parameter to fadeIn()? The first parameter should be the duration of the fading):
Otherwise don't put the fading inside a function.
从评论来看,这似乎只是一个误解,
.fadeIn()
不会对已经100%可见元素产生影响,您需要.hide()
元素,如下所示:您可以在 CSS 中执行此操作,但我建议不要这样做,因为这将使您的非 JS 用户看到列表项,而不是通过 CSS 隐藏它们并保持。
From the comments it seems like this is just a misunderstanding,
.fadeIn()
won't have an effect on an already 100% visible element, you need to.hide()
the element first, something like this:You could do this in CSS, but I recommend against it, since this will let your non-JS users see the list items, instead of having them hidden and stay hidden via CSS.