Working Example Space

Show Hide Fade In Fade Out Append Prepend

jQuery Code

    var newImage = "<img src='https://mikegrace.s3.amazonaws.com/geek-blog/jquery-example-1/ajax-loader-1.gif'/>";
    $(document).ready(function() {
      // hide ajax image when the page finishes loading
      $("#ajax img").hide();  
      // Clicking on element with id 'show' will show all images that are decendents of an element with id 'ajax'
      $("#show").click(function() {
        $("#ajax img").show();
      });
      // Clicking on element with id 'hide' will hide all images that are decendents of an element with id 'ajax'
      $("#hide").click(function() {
        $("#ajax img").hide();
      });
      // Clicking on element with id 'fadein' will fade in all images that are decendents of an element with id 'ajax'
      $("#fadein").click(function() {
        $("#ajax img").fadeIn("slow");
      });
      // Clicking on element with id 'fadeout' will fade out all images that are decendents of an element with id 'ajax'
      $("#fadeout").click(function() {
        $("#ajax img").fadeOut("slow");
      });
      // Clicking on element with id 'append' will append the given string to the element with id 'ajax'
      $("#append").click(function() {
        $("#ajax").append(newImage);
      });
      // Clicking on element with id 'prepend' will prepend the given string to the element with id 'ajax'
      $("#prepend").click(function() {
        $("#ajax").prepend(newImage);
      });
    });