Code has been added to clipboard!

Using jQuery .fadeIn() for Animating the Opacity

Reading time 1 min
Published Jan 15, 2018
Updated Oct 2, 2019

jQuery fadeIn: Main Tips

  • jQuery .fadeIn() runs a fade in animation on an HTML element.
  • It can be used on any element, such as a simple image.

Writing and Using .fadeIn()

The jQuery .fadeIn() method animates the opacity, thus creating a fade animation on the selected element.

Example
$("a").hover(() => {
    $("div").fadeIn();
});

Below is the syntax you would use for this method:

$("selector").fadeIn(length, easing, callback);

jQuery .fadeIn() takes three arguments:

  • length - a numeric value describing how many milliseconds the animation lasts (400 by default). You may also use keywords slow (600 ms) and fast (200 ms).
  • easing - a keyword value describing whether the animation speed is linear (linear), or starts off slow and speeds up (swing; default value).
  • callback - the function to execute once when the animation is complete.
Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX