Question

notDiv=$("<div></div>");
    $(notDiv)
        .attr("id", "notification")
        .html("Item added to shoppingCart successfully")
        .appendTo("#main");

    $(notDiv)
        .fadeIn()
        .delay(1000)
        .fadeOut()
        .remove();

我想在选择商品时弹出通知div。

但div没有出现在屏幕上!!

我做错了哪里？

Answer 1

延迟影响不会影响删除。见文档：

它可以与标准效果队列一起使用，也可以与自定义队列一起使用。

来自https://api.jquery.com/delay/

应该是

 $(notDiv)
        .fadeIn()
        .delay(1000)
        .fadeOut(function(){
                   $(this).remove();
                  });

Answer 2

您的notDiv已经是jQuery个对象，您无需再次制作$(notDiv)。

@ julien-grégoire如何提及，您必须将remove放在fadeOut内。

您可以创建新的插件，使通知事件顺序为fadeIn，delay，fadeOut和remove。

jQuery.fn.fadeTemporary = function(speed) {
    $(this)
        .fadeIn()
        .delay(speed)
        .fadeOut(function(){
             $(this).remove();
        });
}

$("#main").click(function(){
    notDiv=$("<div></div>");
    notDiv.attr("id", "notification")
        .html("Item added to shoppingCart successfully")
        .appendTo("#main")
        .fadeTemporary(3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"> Main </div>

在jquery中1秒后弹出一个fadesOut的通知div

2 个答案: