Bootstrap alert not closing with javascript

Question

I have an issue with my bootstrap alert not sliding up automatically. In my default.aspx I have done the following:

1) Put links to js and bootstrap in head (tried different versions and links, also putting them before the closing body tag):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
rel="stylesheet"/>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

2) Put following script in head:

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

3) Running this in body :

<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
<span aria-hidden="true">&times;</span></button>
<strong>Success!</strong> You have been signed in successfully!
</div>

This working. I've tried an even later version of js as well as Bootstrap, but it still doesn't work - The alert just doesn't slide!

As you can see it works PERFECTLY here: https://codepen.io/CSWApps/pen/XJoLmN

So why doesn't it work in my project?

Other things I've tried are clearing cache and different browser.

Answer 1

You can check Timeout function is called and console log $(this) variable then check any error or inconsistent their

 window.setTimeout(function() { console.log("Timeout"); $(".alert").fadeTo(500, 0).slideUp(500, function(){ console.log($(this)); $(this).remove(); }); }, 4000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="alert alert-success" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span></button> <strong>Success!</strong> You have been signed in successfully! </div>