Bootstrap警报自动closures

我需要在点击Add to Wishlistbutton时调用警报，并在2秒内消失警报。 这是我的尝试，但是一旦出现警报即刻消失。 不知道，错误的地方..任何人都可以帮我吗？

JS脚本

$(document).ready (function(){ $("#success-alert").hide(); $("#myWish").click(function showAlert() { $("#success-alert").alert(); window.setTimeout(function () { $("#success-alert").alert('close'); }, 2000); }); }); 

HTML代码：

 <div class="product-options"> <a id="myWish" href="" class="btn btn-mini" >Add to Wishlist </a> <a href="#" class="btn btn-mini"> Purchase </a> </div> 

警报框：

 <div class="alert alert-success" id="success-alert"> <button type="button" class="close" data-dismiss="alert">x</button> <strong>Success! </strong> Product have added to your wishlist. </div> 

Answer 1

为了顺利的幻灯片：

 $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){ $("#success-alert").slideUp(500); }); 

小提琴

Answer 2

在“I Can Has Have Kittenz”的代码中，使用在2秒内渐变为500的不透明度的fadeTo()对我来说是不可读的。 我认为使用其他选项比如delay（）

 $(".alert").delay(4000).slideUp(200, function() { $(this).alert('close'); }); 

Answer 3

我发现这是一个更好的解决scheme

 $(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){ $(".alert-dismissible").alert('close'); }); 

Answer 4

为什么所有其他的答案使用slideUp只是超越了我。 正如我使用fade和类在closures时（或超时后）警报消失，我不希望它“滑倒”，并与冲突。

除了slideUp方法甚至没有工作。 警报本身并没有显示出来。 以下是对我来说完美的工作：

 $(document).ready(function() { // show the alert setTimeout(function() { $(".alert").alert('close'); }, 2000); }); 

Answer 5

对此的另一个解决scheme5秒后自动closures或消除引导警报消息：

这是用于显示消息的HTML代码：

 <div class="alert alert-danger"> This is an example message... </div> 

Answer 6

 $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){ $("#success-alert").alert('close'); }); 

fadeTo参数fadeTo（速度，不透明度）