Code has been added to clipboard!

Basics of Animation: Understanding jQuery Show Hide Method

Reading time 3 min
Published Jul 3, 2019
Updated Oct 1, 2019

jQuery has a lot of methods to offer for someone who enjoys applying various effects to their websites. A great place to start could be the jQuery show hide.

jQuery show hide method is used to make HTML elements appear and disappear. It is a basic type of animation that can also be a perfect starting point for a beginner. Making jQuery hide and show elements does not require a lot of code lines, so it's easy to grasp and start using.

jQuery Show Hide: Main Tips

  • jQuery has a selection of various methods for applying effects and animation to elements.
  • The hide and show methods might be considered the most basic, as you can apply them with a minimal amount of code.
  • jQuery hide show can also be combined with toggle method.

Definition and Syntax

One of the main merits of jQuery is the animations. Compared to using pure JavaScript, it makes the task vastly easier. A simple and highly useful example of this would be the jQuery hide and show methods:

These methods follow the same syntax pattern as any other jQuery statement:

$(selector).hide | show(duration,callback);

As you can see, jQuery show hide accepts two parameters. Both of them are optional:

  • duration represents a string or number value (in milliseconds) that specifies how long the animation will take.
  • callback defines a function to be executed once the method's execution is complete.

Keep in mind that duration takes in specific keyword values in the form of a string:

  • slow - 600-millisecond duration
  • fast - 200-millisecond duration

Additionally, it should be noted that the default duration of the animation is 400 milliseconds.

Adding Toggle

To take things a step further, you may also try using this method with the toggle method, thus creating a combined toggle show hide jQuery method:

By combining jQuery hide show with toggle, we made it so clicking the same button can make the item appear and disappear as the button is clicked repeatedly. All we had to do was to place the method inside one of the alternate functions of the toggle method.

jQuery Show Hide: Summary

  • The jQuery hide and show methods are some of the most simple animation effects.
  • As they require a minimal amount of code, they are a perfect place to start for jQuery newbies.
  • A combined toggle show hide jQuery method might be created to make the same object appear and disappear as the same button is clicked.
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