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

Share Improve this question Follow edited Sep 3, 2013 at 12:53 Dexygen 12.6k1313 gold badges8686 silver badges151151 bronze badges asked Sep 3, 2013 at 12:51 Peter SaxtonPeter Saxton 4,67666 gold badges3535 silver badges5454 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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>';

    });
});