Bootstrap content smooth slideup when closing alert

Question

I have following code to auto-close Bootstrap alert after 5 seconds

$(".alert").alert();
window.setTimeout(function() { $(".alert").alert('close'); }, 5000);

When closing alert, content jumps top not very smoothly. Is it somehow possible to get content slide smoothly into place?

EDIT: Now the code is working correctly when I'm testing it on JSFiddle, but when I'm using it on my server, only half of it works. The alert is fading out after 3 seconds, but if I press Close button, nothing happens.

Following is my code. Maybe the problem is PHP echo, because the code is exactly the same as on JSFiddle.

echo "<div class=\"alert alert-success\" role=\"alert\">".$message."<button type=\"button\" class=\"close\"><span aria-hidden=\"true\">&times;</span></button></div>";

In jQuery you can just animate scrollTop but I think you don't use it, do you? — Jaroslav Štreit, Jul 26 '15 at 22:55
@JaroslavŠtreit, yes I use jQuery. But `scrollTop()` just sets the value of scrollbar..not so smooth? — lingo, Jul 26 '15 at 23:41
look here http://stackoverflow.com/questions/16475198/jquery-scrolltop-animation — Jaroslav Štreit, Jul 27 '15 at 07:36
@JaroslavŠtreit, I edited my question. Tried using `animate()` with `scrollTop()` but not working. Content jumps to top of the page without animation. What am I doing wrong? — lingo, Jul 27 '15 at 11:15
From http://getbootstrap.com/javascript/#alerts - *To have your alerts use animation when closing, make sure they have the `.fade` and `.in` classes already applied to them.* - Does that not work for you? — Abhitalks, Jul 27 '15 at 11:19
@Abhitalks, yes that works of course. In this case, after alert fade out I want that content moves smoothly to top of the page. — lingo, Jul 27 '15 at 11:28

Abhitalks · Accepted Answer · 2015-07-28T09:13:23.020

As per the bootstrap doc (http://getbootstrap.com/javascript/#alerts):

To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them.

This will cause the alert to fade out.

However, as I see this animates the opacity but does not animate the height and hence the abrupt jump of the content when the alert is removed.

In this case you do not use the default functionality, but do the animation yourself on some event (setTimeout delay in your case). By animating the height of the alert, the content which follows will automatically appear to be animating.

Easiest would be to use the jQuery .slideUp:

Example:

window.setTimeout(function() {
    //$(".custom-alert").alert('close'); <--- Do not use this
  
    $(".custom-alert").slideUp(500, function() {
        $(this).remove();
    });
}, 3000);

<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"></script>
<div class="alert alert-warning custom-alert" role="alert">
  <strong>Warning!</strong> This alert will animate itself to close in 3 secs.
</div>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>

Edit: (based on Op comment)

If you want that to happen on close button click and also the fade and slide animations to be separate, the concept remains the same. Just call the routine on close button click and stagger or chain the animations.

Quick Demo:

$("div.alert").on("click", "button.close", function() {
    $(this).parent().animate({opacity: 0}, 500).hide('slow');
});

<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"></script>
<br><hr>
<div class="alert alert-warning" role="alert">
    <button type="button" class="close">
      <span>&times;</span>
    </button>    
      <strong>Warning!</strong> This alert will animate on clicking the close button.
</div>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>

Combined Fiddle: http://jsfiddle.net/abhitalks/e3k5jnyw/

Thanks for good answer. I edited my question based on this. Please have a look! — lingo, Jul 27 '15 at 17:03
Am on mobile right now, can't fiddle. But the concept remains the same, just wrap the code in a function and call that on click of close button. Don't use the bootstrap baked functionality. — Abhitalks, Jul 27 '15 at 17:07
Thanks again, now it's almost working. I updated the question. — lingo, Jul 28 '15 at 20:57
@lingo: Please stop changing your question. It invalidates the current answers. Clarify your problems in comments. If really required, add content to the question, but do not change it. — Abhitalks, Jul 29 '15 at 04:51
No, the question is same and adding content to it invalidates nothing. It's more easy to add code example to the question than trying to explain problem by words in comments. The answer you send isn't working perfectly for me and thats why I added more info to question and notify you in comments. — lingo, Jul 29 '15 at 08:58
okay I got it working in my system by changing `$("div.alert").on("click", ...` to `$("html, body").on("click", ...` Thanks for answering! — lingo, Jul 30 '15 at 08:04

score 0 · Answer 2 · answered Jul 27 '15 at 11:41

initialize your alert, after 5 sec use jQuery to slide up your alert, then use bootstrap to close it =)

$(".alert").alert();    
window.setTimeout(function() { 
    $(".alert").slideUp(function() { 
        $(".alert").alert('close');
    });
}, 5000);

Bootstrap content smooth slideup when closing alert

2 Answers2

Linked