javascript - Bootstrap 3 - 如何在点击时淡入警告框并在 3 秒后淡出

Question

我正在使用 AngularJS 和 Bootstrap 3。我的网络应用程序有一个“更新”按钮，用于保存用户所做的任何更改。当用户单击“更新”按钮时，我想激活并淡入 Bootstrap 的警告框，提示“信息已保存”，然后在 3 秒后淡出。我不知道如何创建此功能，可能需要一些帮助..

更新:

我决定使用这种方法:

HTML

<button type="button" class="btn btn-info" ng-click="save()">Update</button>

<div id = "alert_placeholder"></div>

JavaScript

$scope.save = function() {
    $('#alert_placeholder').html('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>Your information has been updated.</span></div>')
    setTimeout(function() {
        $("div.alert").remove();
    }, 3000);
}

我想让警告框在第一次出现时淡入并在 3 秒后消失，但我不确定如何使用我的代码使其工作。

Answer 1

我用的是这样的。 (动画看起来很漂亮!)。只需添加此 JS，并将类 flash 应用于您想要消失的每个元素。 确保您还添加了 fade-in 类到所有内容! fade-in 类带有 Bootstrap 。它将在 5 秒内淡出。

window.setTimeout(function() {
  $(".flash").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove();
  });
}, 5000);