Code has been added to clipboard!

Adding Dynamicity Into Your Website by Using jQuery .fadeToggle()

Reading time 1 min
Published Jan 15, 2018
Updated Sep 27, 2019

jQuery fadeToggle: Main Tips

  • jQuery .fadeToggle() toggles between .fadeIn() and .fadeOut() methods.
  • You can add a callback function to run once the animation finishes.

Toggling Opacity

jQuery fade toggle method works by toggling the opacity on the chosen element. In the example below, you can see the color block fading in and out:

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

Here is the syntax you would use to utilize this method:

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

jQuery .fadeToggle() takes three arguments:

  • length - the number of milliseconds it takes for the animation to end. You may also use keywords: slow represents 600 ms, and fast - 200 ms.
  • easing - a keyword value for if the animation speed is constant (linear), or speeding up (swing).
  • callback - the function to execute once the animation is completed.

Note: 400 ms length and swing easing are the default values for jQuery fade toggle.

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