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 selector只会找到display: none或宽度和高度为0的元素（并且隐藏输入，但不适用到ul li。）

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

Answer 2

如果您希望在文档就绪时执行函数fadeItem（），您还必须立即执行它。你试过这个（你为什么把fadeIitem函数作为参数传递给fadeIn（）？第一个参数应该是衰落的持续时间）：

 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隐藏。

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

3 个答案: