I am currently working on some fade out alert boxes where once the fa-close is clicked, it will then fade out and then slide the rest of the alerts/content upwards.
$(document).ready(function() {$(document).on('click', 'div.alert > i', function() {
var trg = $(this); var parent = trg.parent(); parent.animate({ opacity: 0 }, 250, function() { parent.animate({ 'padding-top': 0, 'padding-bottom': 0, height: 0 }, 125, function() { parent.remove(); }); }); }); }); div.alert { width: 940px; margin: auto auto; margin-bottom: 5px; padding: 5px 10px; background-color: #FFF; border: solid 1px #DDD; border-radius: 5px; } div.alert > a, div.alert > p { display: inline-block; font-weight: 600; } div.alert > i { float: right; line-height: 17px; } div.alert > i:hover { color: #000; cursor: pointer; } div.alert.alert-success > *, div.alert.alert-info > *, div.alert.alert-warning > *, div.alert.alert-danger > *, div.alert.alert-posion > * { color: #FFF; } div.alert.alert-success > i:hover, div.alert.alert-info > i:hover, div.alert.alert-warning > i:hover, div.alert.alert-danger > i:hover, div.alert.alert-posion > i:hover { color: #F0F0F0; } div.alert.alert-success { background-color: #2ECC71; border-color: #27AE60; } div.alert.alert-info { background-color: #3498DB; border-color: #2980B9; } div.alert.alert-warning { background-color: #E67E22; border-color: #D35400; } div.alert.alert-danger { background-color: #E74C3C; border-color: #C0392B; } div.alert.alert-posion { background-color: #9B59B6; border-color: #8E44AD; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="alert"> <p><i class="fa fa-fw fa-shield"></i> Welcome to 099</p> <i class="fa fa-fw fa-close"></i> </div> <div class="alert alert-info"> <p><i class="fa fa-fw fa-twitch"></i> Connect with Twitch</p> <i class="fa fa-fw fa-close"></i> </div> <div class="alert alert-posion"> <p><i class="fa fa-fw fa-twitch"></i> Connecting to Twitch</p> <i class="fa fa-fw fa-close"></i> </div> <div class="alert alert-success"> <p><i class="fa fa-fw fa-check"></i> Successfully Logged In</p> <i class="fa fa-fw fa-close"></i> </div> <div class="alert alert-warning"> <p><i class="fa fa-fw fa-exclamation"></i> Incorrect Password</p> <i class="fa fa-fw fa-close"></i> </div> <div class="alert alert-danger"> <p><i class="fa fa-fw fa-close"></i> Unable to verify Account</p> <i class="fa fa-fw fa-close"></i> </div> Note: This uses FontAwesome for their icons. The reason why I am using $(document).on('click', 'div.alert > i'... is because some of the alerts will be loaded in.
• you could save six characters by using camel case for css names, eg, paddingTop instead of 'padding-top' and paddingBottom instead of 'padding-bottom' plus it's more consistent. – Jordan Davis Aug 15 '15 at 5:16