jquery - 一定时间后删除 div

Question

所有，我有以下 jQuery 代码：

jQuery.post(site_url + "save_data.php", jQuery(this).serialize(),
    function(data) {
        //alert("Data Loaded: " + data);
        jQuery("#results").html(data+"<br><br>");
        jQuery("#check_submission").val("yes");
    });

我想在一定时间（5秒）后淡出结果div。

除此之外，如果我重新提交表单，我想再次显示结果 div 5 秒钟，然后再次淡出。

谁能指出我如何做到这一点的正确方向？

谢谢！

Answer 1

jQuery.post(site_url + "save_data.php", jQuery(this).serialize(), function(data) {
    //alert("Data Loaded: " + data);
    var results = jQuery("#results");

    results.html(data+"<br><br>")

    results.show(); // re-display the div
    setTimeout(function(){ // then fade it out....
      results.fadeOut();
    }, 5000); // ...after 5 seconds

    jQuery("#check_submission").val("yes");
});

Answer 2

将结果行替换为以下内容：

$("#results").html(data+"<br><br>").fadeIn(10).delay(5000).fadeOut(200);

它将在 10 毫秒内平滑淡入（100 可能会更好）以撤消任何先前的淡出，延迟 5 秒，然后在 200 毫秒内淡出。

编辑：如果您使用的是 jQuery < 1.4，则可以用作缺少延迟功能的解决方法：

$("#results").html(data+"<br><br>").fadeIn(10).animate({opacity: 1.0}, 5000, function () { 
    $("#results").fadeOut(200);
});