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

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

编辑：如果你正在使用jQuery＆lt; 1.4，您可以使用缺少延迟函数的解决方法：

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

在一段时间后删除div

2 个答案: