jQuery Fade and Slide Effects

Fade and slide are the most used jQuery effects. Fade changes the opacity of an element. Slide changes the height, like a window blind, and it is very good for menus and accordions.

Fade methods

Method	What it does
fadeIn()	Fades a hidden element in (shows it)
fadeOut()	Fades a visible element out (hides it at the end)
fadeToggle()	Switches between fadeIn and fadeOut
fadeTo(speed, opacity)	Fades to a given opacity (0 to 1), and does not hide the element

<div id="box" style="display:none">Fade box</div>

$('#box').fadeIn(400);
console.log('after fadeIn: ' + $('#box').css('display'));

$('#box').fadeOut(400);
console.log('after fadeOut: ' + $('#box').css('display'));

$('#box').fadeTo(400, 0.5);
console.log('after fadeTo: opacity = ' + $('#box').css('opacity'));

In this run the animations are switched off, so the end state shows at once. In a browser the change is smooth over 400 milliseconds.

Slide methods

Method	What it does
slideDown()	Slides a hidden element down (shows it)
slideUp()	Slides a visible element up (hides it)
slideToggle()	Switches between slideUp and slideDown

<button id="btn">Toggle</button>
<div id="panel">Panel content</div>

$('#btn').on('click', function () {
  $('#panel').slideToggle(300);
});

$('#btn').click();
console.log('after 1st click: ' + $('#panel').css('display'));
$('#btn').click();
console.log('after 2nd click: ' + $('#panel').css('display'));

Speed and callback

<div id="note">Message</div>

$('#note').slideUp('slow', function () {
  console.log('slideUp is complete');
  $('#note').text('Closed').slideDown('fast');
});

The callback runs when the effect is finished. It is the right place for the next step, because the effects are asynchronous: the code after the effect line does not wait for it.

Simple accordion with slideToggle

<div class="item">
  <h3 class="head">Question 1</h3>
  <p class="body" style="display:none">Answer 1</p>
</div>
<div class="item">
  <h3 class="head">Question 2</h3>
  <p class="body" style="display:none">Answer 2</p>
</div>

$('.head').on('click', function () {
  $(this).next('.body').slideToggle();
});

$('.head').eq(0).click();
console.log($('.body').eq(0).css('display') + ', ' + $('.body').eq(1).css('display'));

Fade vs slide

• Fade is good for images, messages and popups.
• Slide is good for panels, menus and accordions.
• For fast pages, simple CSS transitions can do the same work, but jQuery is simple and works in old browsers too.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.