Question

我正在尝试按需创建div，然后超时，然后隐藏并从dom中删除。 “load_bar”的display属性设置为none，这样我就可以使用最后一个选择器来获取对刚刚创建的实例的引用。重要的是，此解决方案可以创建多个div，这些div在自己的超时时钟

上运行

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

删除.delay().hide().remove();后，每件事都可以创建div 但是当我添加这个时，div根本没有显示

Answer 1

创建适当的元素，这样你就可以引用函数中的元素：

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

此外，hide()和show()不适用于动画队列，后来不适用于delay() ，除非 持续时间为给定，这就是为什么元素永远不显示，delay()不起作用，元素立即被隐藏。

修改

此外，remove()不是动画方法，因此它不适用于delay()，但hide()是一个有用的回调，请参阅上面的编辑代码。

FIDDLE

Answer 2

问题是因为delay用于停止jQuery动画队列，show和hide都不使用。因此，您的div正在显示，并立即隐藏它们。请改用setTimeout：

$('#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

Answer 3

delay（）函数仅适用于在元素上排队的操作。

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

Answer 4

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

    });
});

使用Jquery临时创建html div

4 个答案: