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

我建议以下

替换此

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

有了这个

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

Answer 2

要从另一个中找到<img>，您必须遍历＆＃34; 代＆＃34;与.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);

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

2 个答案: