Effects

jQuery comes with several useful methods that can animate HTML elements in a web page.

In the page to the right, when you click the navigation arrows at the bottom, the next slide appears with an animated fade in effect.

The next cards will cover 5 common ways to animate HTML elements.

.slideDown()

$('body').click(function() {
  $('.slide').slideDown(600).addClass('active-slide');
});
  • Try it out

    When the Slide Down button is clicked, slide the $(".container") down in 800 milliseconds. To make this happen, add .slideDown(800); after $(".container").hide().

    
    

    .slideUp()

    $('body').click(function() {
      $('.slide').slideUp(600).addClass('active-slide');
    });
    
  • Try it out

    To make the Slide Up button have the effect of the image sliding up, add .slideUp(1100) after $(".container").show().

    
    

    .fadeIn()

    $('body').click(function() {
      $('.slide').fadeIn(600).addClass('active-slide');
    });
    
  • Try it out

    When the Fade In button is clicked, fade the $("container") in 700 milliseconds using .fadeIn(). Add $(document).ready(main); to run the main() function after the document has loaded.

    
    

    .fadeOut()

    $('body').click(function() {
      $('.slide').fadeOut(600).addClass('active-slide');
    });
    
  • Try it out

    When the Fade Out button is clicked, fade the $("container") out in 1000 milliseconds using .fadeOut(). Then run the main() function after the document has loaded.

    
    

    .animate()

    $('.icon-menu').click(function() {
      $('.menu').animate({
          width: "193px"
        },
        300);
    });
    
  • ?