setTimeout не добавляет задержку

Question

Это мой код:

function transition(index){
    $("#right-panel").find("img").each(function(){
        if ($(this).index() === index){
            setTimeout(function(){
                $(this).fadeIn(750);
            }, 100000000);
        }else{
            $(this).fadeOut(750);
        }
    });
}

По какой-то причине setTimeout в функции не вызывает задержки для fadeIn. Что я делаю не так?

Answer 1

this в обратном вызове setTimeout отличается от внешнего.

var self = this;
setTimeout(function(){
    $(self).fadeIn(750);
}, 100000000);

Хотя вы могли бы просто использовать .delay().

$(this).delay(100000000).fadeIn(750)

---

В целом, лучше всего использовать .eq() для захвата того, который вы хотите .fadeIn(), а .fadeOut() для остальных.

function transition(index){
    var images = $("#right-panel").find("img");// get all the images
    var fadein = images.eq(index)
                       .delay(100000000)
                       .fadeIn(750); // fadeIn the one at "index"
    images.not(fadein).fadeOut(750); // fadeOut all the others
}

Answer 2

Зачем вам вообще нужен setTimeout?

function transition(index){
    $("#right-panel").find("img").each(function(){
        if ($(this).index() === index){ // did you check this statement?
            $(this).delay(100000000).fadeIn(750);
        }else{
            $(this).fadeOut(750);
        }
    });
}