Jquery Fading Method

Jquery fadeIn()
This method is used to fade in a hidden element.

Code Structure
$(document).ready(function(){
  ('button').click(function(){
    $('p').fadeIn();
  });
}); 

Jquery fadeOut()
This method is used to fade out a visible element.

Code Structure
$(document).ready(function(){
  $('button').click(function(){
    $('p').fadeOut();
  });
}); 

Jquery fadeToggle()
This method toggles between fadeIn() and fadeOut().

Code Structure
$(document).ready(function(){
  $('button').click(function(){
    $('p').fadeToggle();
  });
}); 

Jquery fadeTo()
This method allows fading with opacity.

Code Structure
$(document).ready(function(){
  $('button').click(function(){
    $('p').fadeTo('slow', 0.5);
  });
}); 

Syntax
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback); 
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

Code Structure:
$(document).ready(function(){
  $('#hide').click(function(){
    $('p').fadeIn(500);
  });
}); 

Code Structure
$(document).ready(function(){
  $('button').click(function(){
    $('p').fadeIn(fast);
  });
}); 

Share this

Related Posts