Scolar

jQuery Effects and Animations

1 min read Log in to track progress

jQuery makes it easy to add animations and visual feedback.

Basic Effects

JavaScript
$('#panel').hide();           // hide instantly
$('#panel').show();           // show instantly
$('#panel').toggle();         // toggle visibility

$('#panel').fadeIn();         // fade in
$('#panel').fadeOut();        // fade out
$('#panel').fadeToggle();     // toggle with fade

$('#panel').slideDown();      // slide down
$('#panel').slideUp();        // slide up
$('#panel').slideToggle();    // toggle with slide

Custom Animation

JavaScript
$('#box').animate({
  width: '300px',
  height: '200px',
  opacity: 0.5,
  marginLeft: '50px'
}, 500);  // 500ms duration

Chaining Effects

JavaScript
$('#notification')
  .fadeIn(300)
  .delay(2000)
  .fadeOut(300);

Tips

  • Use CSS transitions for simple animations — they're more performant.
  • Use jQuery effects for complex sequences and chaining.
  • Keep animations subtle — too much motion is distracting.

🎉 You have completed the jQuery course!