Jquery Methods

Here we are introducing some simple methods in Jquery.

show() and hide()
toggle()

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/example.css">
  </head>
  <body>
    <h1>Checkout this volcano</h1>
    <div class="normal-volcano">
      <h4>What a nice looking volcano...</h4> 
      <img src="images/volcano.jpg">
    </div>  
    <div class="erupting-volcano">
      <h4>Everyone run for your lives!</h4> 
      <img src="images/erupting.jpg">
    </div>
    <script src="scripts/jquery-1.11.3.js"></script>
    <script src="scripts/myscript.js"></script>
  </body>  
</html>

example.css

img {
  width: 400px;
  height: 400px;
}

.erupting-volcano {
  display: none;
}

myscript.js

$("img").on("click", function(){
  $(".erupting-volcano").toggle();
  $(".normal-volcano").toggle();
})

Try the following:

Create a webpage with 2 images, use divs to separate the images. Hide one of the images using CSS rules.
Add a listener event for "img" on "click", use the methods show() and hide() on interact with the images.
Now use toggle() instead of show() and hide().
Now try the methods fadeIn() and fadeOut() instead of toggle.