Question

I have a jQuery function which loops through a set of <article>-elements:

$("article:first").fadeTo(animationTime,1,function() {
    $(this).delay(2000).fadeTo(animationTime,0,function(){ // was 20000
        $(this).find('#delaythisarticle').delay(10000);
        $(this).insertAfter("article:last");
        $("article:last").hide();
        mainSlide(200);
    });
})

Now, what I want is to show one article longer than the rest. This article has the ID #delaythisarticle. I tried the delay() function, but I understood that this does not work when it is not in a jQuery queue. How can I solve this?

Answer 1

Do something like using ternary operators.

With this same code:

$("article:first").fadeTo(animationTime,1,function() {
    $(this).delay(2000).fadeTo(animationTime,0,function(){ // was 20000
        $(this).find('#delaythisarticle').delay(10000);
        $(this).insertAfter("article:last");
        $("article:last").hide();
        mainSlide(200);
    });
})

Replace the animationTime with:

.fadeTo(($(this).attr("id") == "delayThisArticle") ? 10000 : animationTime)

Try and let us know if it works. 🙂