帮助在页面加载时淡入列表

Question

因此，我一直在尝试在页面加载时淡入由 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 类，任何帮助将不胜感激，谢谢。

Answer 1

您正在该文档中定义 fadeItem() ，但由于您没有粘贴整个内容，我不确定您是否真的调用它？从准备好的文档中调用 fadeItem() 应该足以启动该过程。

直接写可能会更容易：

// $(fn) is an alias for $(document).ready(fn)
$(function fadeItem() {
   $("ul li:hidden:first").delay(500).fadeIn(fadeItem);
});

这样该函数在文档准备好时被调用，并且仍然可以调用自身。

另外，考虑您在某些评论中的回应 - :hidden 选择器 只会查找 display: none 或宽度和高度为 0 的元素（并且输入隐藏，但这不适用于 ul li。）

您可能在搜索隐藏项目之前需要实际隐藏项目......

Answer 2

如果您希望函数 fadeItem() 在文档就绪时执行，则还必须立即执行它。您是否尝试过这个（为什么将 fadeIitem 函数作为参数传递给 fad​​eIn()？第一个参数应该是淡入淡出的持续时间）：

 function fadeItem() {
      $('ul li:hidden:first').delay(500).fadeIn(400);
 }();//execute the function

否则不要将淡入淡出放入函数中。

$(document).ready(function() {
          $('ul li:hidden:first').delay(500).fadeIn(400);

Answer 3

从评论来看，这似乎只是一个误解， .fadeIn() 不会对已经100%可见元素产生影响，您需要.hide() 元素，如下所示：

$(document).ready(function() {
   $('ul li').hide();
   function fadeItem() {
      $('ul li:hidden:first').delay(500).fadeIn(fadeItem);

您可以在 CSS 中执行此操作，但我建议不要这样做，因为这将使您的非 JS 用户看到列表项，而不是通过 CSS 隐藏它们并保持。