Can Twitter Bootstrap alerts fade in as well as out

Question

When I first saw the alerts in Bootstrap I thought they would behave like the modal window does  dropping down or fading in  and then fading out when closed  But it seems like they are always visible  I guess I could have them sit in a layer above my app and manage showing them but I was wondering if the functionality was built in   thanks   Edit  what I have so far    lt div id  saveAlert  class  alert-message success fade in  data-alert  alert  style  top 0  gt     lt a class  close  href     gt    lt  a gt     lt p gt  lt strong gt Well done  lt  strong gt  You successfully read this alert message  lt  p gt   lt  div gt

User · Answer

For 2 3 and above  just add       alert   fadeOut 3000     bootstrap    lt div class  alert success fade in  data-alert  alert   gt       lt a class  close  data-dismiss  alert  href     gt  amp times  lt  a gt         code   lt  div gt    Works in all browsers

User · Answer

Add hide class to alert-message  Then put the following code after your jQuery script import     document  ready  function            alert-message   animate    height   toggle   opacity   toggle         window setTimeout  function                alert-message   slideUp           2500         If you want handle multiple messages  this code will hide them in ascending order     document  ready  function       var hide delay   2500      starting timeout before first message is hidden    var hide next   800       time in mS to wait before hiding next message        alert-message   slideDown   each  function index el          window setTimeout  function               el  slideUp        hide the message          hide delay   hide next index

User · Answer

None of the current answers worked for me   I m using Bootstrap 3   I liked what Rob Vermeer was doing and started from his response   For a fade in and then fade out effect  I just used wrote the following function and used jQuery   Html on my page to add the alert s  to            lt div class  alert-messages text-center  gt           lt  div gt    Javascript function to show and dismiss the alert   function showAndDismissAlert type  message        var htmlAlert     lt div class  alert alert-    type      gt     message     lt  div gt            Prepend so that alert is on top  could also append if we want new alerts to show below instead of on top          alert-messages   prepend htmlAlert           Since we are prepending  take the first alert and tell it to fade in and then fade out         Note  if we were appending  then should use last   instead of first           alert-messages  alert   first   hide   fadeIn 200  delay 2000  fadeOut 1000  function        this  remove            Then  to show and dismiss the alert  just call the function like this       showAndDismissAlert  success    Saved Successfully         showAndDismissAlert  danger    Error Encountered        showAndDismissAlert  info    Message Received      As a side note  I styled the div alert-messages fixed on top        lt style gt      div alert-messages           position  fixed          top  50px          left  25           right  25           z-index  7000             lt  style gt

User · Answer

You can fade-in a box using jquery  Use bootstraps built in  hide  class to effectively set display none on the div element    lt div id  saveAlert  class  alert alert-success hide  data-alert  alert  style  top 0  gt               lt a class  close  href     gt    lt  a gt               lt p gt  lt strong gt Well done  lt  strong gt  You successfully read this alert message  lt  p gt           lt  div gt    and then use the fadeIn function in jquery  like so       saveAlert   fadeIn      There are also specify a duration for the fadeIn function  e g          saveAlert   fadeIn 400    Full details on using the fadeIn function can be found on the official jQuery documentation site  http   api jquery com fadeIn   Just a sidenote as well  if you arent using jquery  you can either add the  hide  class to your own CSS file  or just add this to your div     lt div style  display none   id  saveAlert  gt    Your div will then basically be set to hidden as default  and then jQuery will perform the fadeIn action  forcing the div to be displayed

User · Answer

I got this way to close fading my Alert after 3 seconds  Hope it will be useful       setTimeout function            alert   fadeTo  slow   0 1  function                alert   alert  close                       3000

User · Answer

The thing I use is this   In your template an alert area   lt div id  alert-area  gt  lt  div gt    Then an jQuery function for showing an alert  function newAlert  type  message            alert-area   append     lt div class  alert-message     type     fade in  data-alert gt  lt p gt      message      lt  p gt  lt  div gt              alert-message   delay 2000  fadeOut  slow   function        this  remove          newAlert  success    Oh yeah

User · Answer

I don t agree with the way that Bootstrap uses fade in  as seen in their documentation - http   v4-alpha getbootstrap com components alerts    and my suggestion is to avoid the class names fade and in  and to avoid that pattern in general  which is currently seen in the top-rated answer to this question    1  The semantics are wrong - transitions are temporary  but the class names live on  So why should we name our classes fade and fade in  It should be faded and faded-in  so that when developers read the markup  it s clear that those elements were faded or faded-in  The Bootstrap team has already done away with hide for hidden  why is fade any different   2  Using 2 classes fade and in for a single transition pollutes the class space  And  it s not clear that fade and in are associated with one another  The in class looks like a completely independent class  like alert and alert-success  The best solution is to use faded when the element has been faded out  and to replace that class with faded-in when the element has been faded in  Alert Faded So to answer the question  I think the alert markup  style  and logic should be written in the following manner  Note  Feel free to replace the jQuery logic  if you re using vanilla javascript  HTML  lt div id  quot saveAlert quot  class  quot alert alert-success quot  gt     lt a class  quot close quot  href  quot   quot  gt    lt  a gt     lt p gt  lt strong gt Well done  lt  strong gt  You successfully read this alert message  lt  p gt   lt  div gt   CSS  faded     opacity  0    transition  opacity 1s     JQuery     saveAlert  close   on  click   function            quot  saveAlert quot        addClass  faded

User · Answer

I strongly disagree with most answers previously mentioned    Short answer      Omit the  in  class and add it using jQuery to fade it in    See this jsfiddle for an example that fades in alert after 3 seconds http   jsfiddle net QAz2U 3   Long answer   Although it is true bootstrap doesn t natively support fading in alerts  most answers here use the jQuery fade function  which uses JavaScript to animate  fade  the element  The big advantage of this is cross browser compatibility  The downside is performance  see also  jQuery to call CSS3 fade animation     Bootstrap uses CSS3 transitions  which have way better performance  Which is important for mobile devices   Bootstraps CSS to fade the alert    fade     opacity  0    -webkit-transition  opacity 0 15s linear    -moz-transition  opacity 0 15s linear    -o-transition  opacity 0 15s linear    transition  opacity 0 15s linear     fade in     opacity  1      Why do I think this performance is so important  People using old browsers and hardware will potentially get a choppy transitions with jQuery fade    The same goes for old hardware with modern browsers  Using CSS3 transitions people using modern browsers will get a smooth animation even with older hardware  and people using older browsers that don t support CSS transitions will just instantly see the element pop in  which I think is a better user experience than choppy animations    I came here looking for the same answer as the above  to fade in a bootstrap alert  After some digging in the code and CSS of Bootstrap the answer is rather straightforward  Don t add the  in  class to your alert  And add this using jQuery when you want to fade in your alert   HTML  notice there is NO in class     lt div id  myAlert  class  alert success fade  data-alert  alert  gt     lt  -- rest of alert code goes here -- gt   lt  div gt    Javascript   function showAlert          myAlert   addClass  in       Calling the function above function adds the  in  class and fades in the alert using CSS3 transitions  -   Also see this jsfiddle for an example using a timeout  thanks John Lehmann    http   jsfiddle net QAz2U 3

User · Answer

Of course  Yes  Use this simple file in your project  https   gist github com 3851727   First add you HTML like this    lt div id  messagebox  class  alert hide  gt  lt  div gt    and then use       messagebox   message  text   Hello world    type   error       You can pass all bootstrap alert types such as error  success and warning to type property as options

User · Answer

This is very important question and I was struggling to get it done  show hide  message by replacing current and add new message   Below is working example    x000D   x000D  function showAndDismissAlert type  message    x000D   x000D    var htmlAlert     lt div class  alert alert-    type      gt     message     lt  div gt    x000D        alert-messages   prepend htmlAlert   x000D        alert-messages  alert   hide   fadeIn 600  delay 2000  fadeOut 1000  function     x000D        this  remove    x000D        x000D   x000D    x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div class  alert-messages  gt  lt  div gt  x000D   x000D   lt div class  buttons  gt  x000D     lt button type  button  name  button  onclick  showAndDismissAlert  success    Saved Successfully     gt Button1 lt  button gt  x000D     lt button type  button  name  button  onclick  showAndDismissAlert  danger    Error Encountered    gt Button2 lt  button gt  x000D     lt button type  button  name  button  onclick  showAndDismissAlert  info    Message Received    gt Button3 lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    Hope it will help others

[jquery] Can Twitter Bootstrap alerts fade in as well as out?

Examples related to jquery

Examples related to css

Examples related to alerts

Examples related to twitter-bootstrap