CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
David
David

Reputation: 5

Ajax success function animation

I have a request a quote form using Ajax and I finally have everything working the way I want it to (special thanks to a member here who helped me previously). There's only one aesthetic addition i'd like to make and i'm not sure how to go about doing it. I'd like the success message I have to use the slideInUp css animation when the Submit button is pressed, instead of it just appearing with no animation.

This is what I have so far..

$("#myform").submit(function(e) {
            e.preventDefault(); // avoid to execute the actual submit of the form.
            var $this = $(this)
            var url = $this.attr('action') // get the action attribute of current form
            $.ajax({
                   type: "POST",
                   url: "submit.php",
                   data: $this.serialize(), // serializes the form's elements.
                   success: function(data)
                   {
                       $this.find('.fs-submit').css('background', '#1fae5b');
                       $this.find('.fs-submit').css('color', '#ffffff');
                       $this.find('.fs-submit').css('border', '#1fae5b');
                       $this.find('.fs-submit').prop('disabled', true);
                       $this.find('.fs-submit').val('Submitted').text('Submitted ✔');
                       $this.find('.success').css('display', 'inline');
                   }
                 });

        });

The HTML:

<button class="fs-submit" type="submit" value="Submit" id="submit">Submit</button>
<p class="success">Your request for a quote has been sent to us. We will get back to you shortly!</p>

And the CSS:

p.success{
     margin: 0 auto;
     display: none;
     color: #1fae5b;
     font-family: 'Open Sans', sans-serif;
     font-weight: 600;
     font-size: 14px;
}

Upvotes: 0

Views: 1134

Answers (1)

J. Titus
J. Titus

Reputation: 9690

The first thing in Google search results when searching for css slideinup is this CodePen with the necessary CSS:

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

Using this CSS, rather than doing this:

$this.find('.success').css('display', 'inline');

do this

$this.find('.success').addClass('slideInUp');

Upvotes: 2

Related Questions