帮助调试JQuery Fade脚本

对于我第一次进入JQuery的企业之一，我有一个非常简单的目标，即逐步浏览div的子节点并逐个淡入。不过，由于某些原因，如果我手动定义nth-child的索引，比如说1，那么第一个孩子会淡入淡出四次。然而，如果我使用变量“i”，那么所有的孩子都会淡入淡出四次。这是为什么发生？帮助调试JQuery Fade脚本

这里是我的代码：

<div id="slideshow"> 
    <p>Text1</p> 
    <p>Text2</p> 
    <p>Test3</p> 
    <p>Text4</p> 
</div> 

<script> 
$(document).ready(function() { 
     var $elements = $('#slideshow').children(); 
     var len = $elements.length; 
     var i = 1; 
     for (i=1;i<=len;i++) 
     { 
      $("#slideshow p:nth-child(i)").fadeIn("slow").delay(800).fadeOut("slow"); 
     } 
}); 
</script>

每个段落的设置为display: none;开始。

来源

2010-09-05 Oren Hizkiya

你需要逃避i。眼下，nth-child正在寻找拥有的i的索引，而不是0，1，2等，所以不是孩子，用途：

$('#slideshow p:nth-child(' + i + ')').fadeIn('slow').delay(800).fadeOut('slow');

不过，我不认为会做一个在一次;事实上，我很确定它不会。如果没有，请尝试如下所示：

var delay = 0; 
$('#slideshow p').each(
    function (index, item) 
    { 
     $(this).delay(delay).fadeIn('slow').delay(800).fadeOut('slow'); 
     delay += 2200; 
    } 
);

这没有经过测试，但至少应该是体面的伪代码。

来源

2010-09-05 22:26:51

对于未经测试的应用程序来说非常重要。代码工作，甚至在IE中。谢谢。 – 2010-09-05 22:35:46

甜，很高兴它的作品！我只是猜测事情会按我的意愿去做。哈哈哈。别客气！ – 2010-09-05 22:55:31

我并不是说这是不可能的，但最终即使使它起作用也没有意义，因为它会在IE上失败。

请参阅此处。 http://css-tricks.com/how-nth-child-works/

来源

2010-09-05 22:25:36 cmptrwhz

实际上，由于OP使用jQuery，根据链接的文章，这不是问题。 '这里的一个保存优点是，如果您使用jQuery，它支持包括：nth-child在内的所有CSS选择器，则即使在Internet Explorer中，选择器也可以工作。“ – 2010-09-05 22:30:17

当您手动输入一个索引（1）时，则循环4次并淡化第一个孩子4次。当你使用我，他们将全部淡入四次，因为我在一个字符串内不是对i变量的引用，它只是字符串的一部分。

$(document).ready(function() { 
     var $elements = $('#slideshow').children(); 
     var len = $elements.length; 
     var i = 1; 
     for (i=1;i<=len;i++) 
     { 
      $("#slideshow p:nth-child("+i+")").fadeIn("slow").delay(800).fadeOut("slow"); 
     } 
});

应该工作，注意"+i+"

一个更好的办法来做到这一点是：

$(function(){ 
    $('#slideshow p').each(function(i, node){ 
     setTimeout(function(){ 
      $(node).fadeIn("slow").delay(800).fadeOut("slow"); 
      node = null; //prevent memory leak 
     }, i * 800); 
    }); 
});

来源

2010-09-05 22:26:37 BGerrissen

帮助调试JQuery Fade脚本

回答

相关问题