如何使用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

我建議以下

取代這個

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

有了這個

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

Answer 2

要查找<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);