"Alerts - jquery animation"
Bootstrap 3.1.0 Snippet by escapedlion

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="container"> <div class="row"> <div class="col-md-12"> <div class="alert-message"> </div> <BR></BR> <BR></BR> <BR></BR> <BR></BR> <h3>Bootstrap Alert Message</h3> <p> <button id="alert1" class="btn btn-alert btn-success" type="button">Success</button> <button id="alert2" class="btn btn-alert btn-info" type="button">Info</button> <button id="alert3" class="btn btn-alert btn-warning" type="button">Warning</button> <button id="alert4" class="btn btn-alert btn-danger" type="button">Danger</button> </p> </div> </div> </section>
.alert { position: relative; z-index: 10; padding-left: 250px; font-size: 14px; } .alert h3, .alert .h3 { margin-top:0; margin-bottom:0; font-size: 24px; }
$(function() { $('.btn-alert').on('click', function(event) { if($(event.target).attr('id')=='alert1') { // alert('alert1 clicked'); var type = 'success'; var message = 'action was a success!' // } else if($(event.target).attr('id')=='alert2') { // alert('alert2 clicked'); var type = 'info'; var message = 'action was a informational!' // } else if($(event.target).attr('id')=='alert3') { // var type = 'warning'; var message = 'action was a warning!' // } else if($(event.target).attr('id')=='alert4') { var type = 'danger'; var message = 'action was a danger!' } var alertType = 'alert-'+ type // alert('alert type is: '+ alertType); var htmlAlert = '<div class="alert '+ alertType +'"><h3>'+ type +' alert</h3><BR><p>'+ message +'</p></div>'; // alert(htmlAlert); $(".alert-message").prepend(htmlAlert); $(".alert-message .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); }); }); });

Related: See More


Questions / Comments: