Как мне исчезнуть на следующем изображении в списке, используя jQuery?

Question

Как мне исчезнуть на следующем изображении в списке, используя jQuery?

0

У меня есть список изображений. Я хотел бы исчезнуть на следующем изображении после того, как предыдущее изображение исчезло. Я думаю, это должно быть довольно просто.

<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);
        });
    });

Проблема возникает, когда я пытаюсь исчезнуть в следующем изображении в списке.

Sheldon 08 июнь 2014, в 21:55

Источник

0

Здесь много повторяющихся ответов
user1320260 08 июнь 2014, в 20:06

Теги:

javascript

jquery

html

css

image

2 ответа

2

Я бы предложил следующее

Заменить это

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

С этим

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

Kevin Lynch 08 июнь 2014, в 18:11

Ещё вопросы

Здесь много повторяющихся ответов

Jonathan Lonowski · Accepted Answer · 2014-06-08T17-05-00.000Z

Чтобы найти <img> от другого, вам нужно будет вернуться назад к "поколению" с помощью .find() или .children(), .parent() с .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);

Хотите поделиться тем, что вы считаете неправильным? Голосование за рулем не помогает мне попытаться исправить это.