如何使用jQuery淡出列表中的下一个图像？

Question

我有一张照片清单。我想在下一个图像淡出后，先前的图像已经褪色。我觉得应该很简单。

<ul class="nav fading">
  <li><?= anchor("#","Supported by",array("class" => "footer-heading disabled")) ?></li>
  <li><?= img("assets/img/1.png") ?></li>
  <li><?= img("assets/img/2.png") ?></li>
</ul>

到目前为止我的代码是：

$(document).ready(function(){
    $(".fading img").hide(); //hide everything 
    $(".fading img:first").fadeIn(4000);
    $(".fading img:first").fadeOut(4000,function(){
        $(this).parent().next().fadeIn(4000);
    });
});

我试图在相同的图像褪色后，再次将其淡出，这是可行的：

$(document).ready(function(){
        $(".fading img").hide(); //hide everything 
        $(".fading img:first").fadeIn(4000);
        $(".fading img:first").fadeOut(4000,function(){
            $(this).fadeIn(4000);
        });
    });

当我试图淡出列表中的下一个图像时，问题就出现了。

Answer 1

要想从另一个人那里找到一个<img>，你必须回到.find()或.children()的“一代人”，因为它已经和.parent()一起上升了。

$(this)             // the current, `:first` <img>
    .parent()       // to its parent <li> (2nd under the <ul>)
    .next()         // to the last <li>
    .find('img')    // to the <img> under the last <li>
    .fadeIn(4000);

否则，行将查找并尝试.fadeIn() <li>，这不会影响其下的<img>。

$(this).parent().next().fadeIn(4000);

Answer 2

我建议如下

替换这个

$(this).parent().next().fadeIn(4000);

有了这个

$(this).parent().next().find('img').fadeIn(4000);