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.

Here's what I've got:

$(document).ready(function() {
  $(document).on('click', 'div.alert > i', function() {
    var trg = $(this);
    var parent = trg.parent();

      opacity: 0
    }, 250, function() {
        'padding-top': 0,
        'padding-bottom': 0,
        height: 0
      }, 125, function() {
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 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 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 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 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 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>

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.

Is the jQuery as compact as possible or can it be compacted even more? (ignore the variables, I mean the actual animation code)

  • \$\begingroup\$ 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. \$\endgroup\$ – Jordan Davis Aug 15 '15 at 5:16
  • \$\begingroup\$ @jorjordandan, Nice! I didn't know about this. \$\endgroup\$ – 099 Aug 17 '15 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.