What does jQuery toggle

jQuery animate, hide, show - effects and animations

jQuery vs Vanilla Javascript

jQuery hides the complexity of animations behind a simple interface and brings ready-made animations with it: the subtle jQuery effects.

Today, thanks to QuerySelector, modern browsers manage these effects with pure Javascript (also known as "Vanilla Javascript") or simply with CSS animations, even without the use of jQuery.

jQuery - the simple effects

With little more than two or three script instructions, jQuery slows down effects that we know from HTML and CSS - display: none and display: block. Instead of switching an element such as a light switch on and off, jQuery shows and hides elements in a comprehensible manner.

  • Import from above right show ()
  • Hide up rightshide ()
  • Switch from showing and hiding toggle ()
  • Enlarge from above MitteslideDown ()
  • Zoom out upwards MitteslideUp ()
  • Zoom in / out in the switch slideToggle ()
  • FadeIn ()
  • FadeOut ()
  • Hide to WertfadeTo ()
  • Show / hide in alternating threadToggle ()

Effects that make the element visible need to get started display: none.

jQuery effects are called with an event and an anonymous function, which keeps the script code together and easy to read.

+ - Event without 'on' prefix | | + - anonymous function | | $ ('. overlay'). mouseover (function () {$ ('. caption'). fadeIn ('slow');});
Grapes, yes, I like to eat them, believe me. The grapes taste sweeter than almond kernels.
fruit basket
Grapes I like to eat ....
$ ('. caption'). hide (); $ ('. overlay'). mouseover (function () {$ ('. caption'). fadeIn ('slow');}); $ ('. overlay'). mouseout (function () {$ ('. caption'). fadeOut ('slow');});

jQuery show and hide, fadeIn and fadeOut initially do nothing other than the CSS rules caption {display: none; } and caption {display: block; } - they hide or show an element.

Only the transfer of parameters such as slow, normal, nearly or the specification of milliseconds (1000 milliseconds = 1 second) brings in the effects.

Reset effect

Nothing easier than this:

$ ("# reset"). click (function () {$ ("# icon"). removeAttr ("style");});

Example slideUp, slideDown

At show() and hide () the animation moves to the top left corner.

slideUp () and slideDown () enlarge the element to 100% and shrink it to 0.

slideUp, slideDown
$ ('. slider'). mouseenter (function () {$ ('. upndown img'). slideDown ('slow');}); $ ('. upndown'). mouseleave (function () {$ ('. upndown img'). slideUp ('slow');});

Today we can also carry out the "archetypes" of the jQuery effects with CSS transition and CSS keyframe animations. Although Javascript has made great strides: The elegance of the small effects with jQuery is not easy to replace.

Replace jQuery with Javascript and CSS

jQuery was developed in 2006, primarily to compensate for the differences between browsers. Today the big differences and bugs have been leveled out, Javascript is more standardized (read: more reliable) and CSS has presented effects with seven-mile boots.

Do we really still need jQuery? Many projects automatically rely on jQuery without checking whether it is really worth the effort: The simple jQuery effects in particular can easily be replaced by CSS.

On the other hand, the elegant jQuery methods such as closest, after, before, replaceWith have only landed in the evergreen browsers, but not yet in IE11.

External sources