I am trying to create div's on demand which then timeout and are then hidden and removed from the dom. The display property of "load_bar" is set to none so that I can use the last selector to get a reference to the instance I have just created. It is important that this solution can create several div's which are running on their own timeout clock

$(document).ready(function () { 
    $('#add').click(function () {
        var t = Math.random()*20;
        alert(t);
        var destination = $('input').val();
        $('#holding_pen').append('<div class="load_bar">'+destination+'</div>');
        $('.load_bar:last').show().delay(t).hide().remove();
    });
});

Every thing works to create divs when I remove .delay().hide().remove(); However when I add this the div is not shown at all

I am trying to create div's on demand which then timeout and are then hidden and removed from the dom. The display property of "load_bar" is set to none so that I can use the last selector to get a reference to the instance I have just created. It is important that this solution can create several div's which are running on their own timeout clock

$(document).ready(function () { 
    $('#add').click(function () {
        var t = Math.random()*20;
        alert(t);
        var destination = $('input').val();
        $('#holding_pen').append('<div class="load_bar">'+destination+'</div>');
        $('.load_bar:last').show().delay(t).hide().remove();
    });
});

Every thing works to create divs when I remove .delay().hide().remove(); However when I add this the div is not shown at all

• javascript
• jquery
• delay

4 Answers 4

Create proper elements, that way you'll have a reference to the element within the function:

$(document).ready(function () { 
    $('#add').click(function () {
        var t           = (Math.random()*20)*1000,
            destination = $('input').val(),
            div         = $('<div />', {'class':'load_bar', text: destination});

        $('#holding_pen').append(div);
        div.show(1).delay(t).hide(1, function() {
            $(this).remove();
        });
    });
});

Also, hide() and show() does not work with the animation queue and subsequently not with delay() unless a duration is given, and that's why the element is never shown, delay() doesn't work and the element is hidden right away.

EDIT:

Also, remove() is not an animated method, so it doesn't work with delay(), but hide() a useful callback for that, see edited code above.

FIDDLE

The problem is because delay is used to stop jQuery animation queue, which both show and hide do not use. Therefore your div is being shown and them immediately hidden. Use setTimeout instead:

$('#add').click(function () {
    var destination = $('input').val();
    $('#holding_pen').append('<div class="load_bar">'+destination+'</div>');
    $('.load_bar:last').show();
    setTimeout(function() {
        $('.load_bar:last').hide();
    }, Math.random() * 20 * 1000); // * 1000 = seconds
});

Example fiddle

The delay() function only applies to actions queued on the element.

$(document).ready(function () { 
    $('#add').click(function () {
        var t = Math.random()*20;
        alert(t);
        var destination = $('input').val();
        $('#holding_pen').append('<div class="load_bar">'+destination+'</div>');
        $('.load_bar:last').show().delay(t).queue(function( nxt ) {
            $(this).hide().remove();
            nxt(); // continue the queue
        });
    });
});

$(document).ready(function () { 
    $('#add').click(function () {
        var t = Math.random()*20;
        alert(t);
        var destination = $('input').val();
        $('#holding_pen').innerHTML='<div class="load_bar">'+destination+'</div>';

    });
});