jQuery — Ajax, Animation, and Append

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.ajaxStop()

The .ajaxStop() method lets us add a callback that’s called when the Ajax request is done.

For example, we can write:

$(document).ajaxStop(function(event, xhr, settings) {
  console.log(event, xhr, settings)
});

$.ajax({
  url: "https://yesno.wtf/api",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

We passed in a callback with the event , xhr , and settings parameter.

settings has the request data like the URL and request method.

xhr is an object with the request state.

.ajaxSuccess()

The .ajaxSuccess() method lets us add a callback that’s run when an Ajax request completes successfully.

For example, we can write:

$(document).ajaxSuccess(function(event, xhr, settings) {
  console.log(event, xhr, settings)
});

$.ajax({
  url: "https://yesno.wtf/api",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

We have a callback with the same parameters as the other Ajax methods.

All Selector

We can get all elements within another element with the * selector.

For example, if we have:

<div id="test">
  <div>DIV</div>
  <span>SPAN</span>
  <p>P <button>Button</button></p>
</div>

Then we can get all the elements inside the div with ID test by writing:

$("#test").find("*").css("border", "3px solid red")

Then we call css to add a red border in all the elements.

.animate()

The .animate() method lets us perform custom animation of a set of CSS properties.

For example, if we have the following HTML:

<div id="clickme">
  Click here
</div>
<img id="book" src="https://i.picsum.photos/id/25/300/300.jpg?hmac=hXirsaKumNCLu7iGSrMI_RkAEfXF01DGx6c4wzBUpXs" alt="" width="100" height="123"
  style="position: relative; left: 10px;">

We can add an animation to the when we click on Click here by writing:

$("#clickme").click(function() {
  $("#book").animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

We get the div with ID clickme , then we call click to listen to clicks on it.

Then we call animate to animate the image by changing the left property.

:animated Selector

We can select the element that’s animated with the :animated selector.

For example, if we have the following HTML:

<button id="run">Run</button>

<div></div>
<div id="mover"></div>
<div></div>

And the following CSS:

div {
   background: yellow;
   border: 1px solid #AAA;
   width: 80px;
   height: 80px;
   margin: 0 5px;
   float: left;
 }

div.colored {
   background: green;
}

Then we can toggle the color of the animate div, which has the ID mover by writing:

$("#run").click(function() {
  $("div:animated").toggleClass("colored");
});

function animate() {
  $("#mover").slideToggle("slow", animate);
}

animate();

When we click Run, the toggleClass method is called to change its color.

.append()

We can use the .append method to add elements after another element.

For example, if we have:

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

Then we can get the elements with the inner class by writing:

$(".inner").append("<p>Test</p>");

Then both divs will have <p>Test</p> HTML attached to it.

Conclusion

We can listen to Ajax events with various methods.

Also, we can animate items and append elements to other elements.