JavaScript frameworks

jQuery

"Write less, do more." The library that defined an era — concise DOM selection, effortless effects, chaining and AJAX, all behind the legendary $() function.

Demo 01

slideToggle & fadeToggle

jQuery's effects animate show/hide in one call. These are real jQuery animations loaded from CDN.

This panel slides open and closed with $(...).slideToggle().

This one fades in and out with $(...).fadeToggle().

$('#slide').on('click', () => {
  $('#slidepanel').slideToggle();
});
$('#fade').on('click', () => {
  $('#fadepanel').fadeToggle();
});

Demo 02

Method chaining

jQuery methods return the same set, so you can chain calls into one expressive line. Click to restyle and animate this box in a single chain.

Click below to transform me

$('#box')
  .css('color', '#fff')
  .css('background', '#6d4dff')
  .text('Chained! ✨')
  .fadeOut(120)
  .fadeIn(400);

Demo 03

Live filtering

Bind keyup and use jQuery's :contains / .filter() to show and hide matching rows as you type.

$('#search').on('keyup', function() {
  const q = $(this).val().toLowerCase();
  $('#list li').each(function() {
    $(this).toggle(
      $(this).text().toLowerCase().includes(q)
    );
  });
});

Demo 04

animate()

.animate() tweens CSS properties over time. Send the box sliding across its track and back.

$('#box').animate({ left: '80%' }, 500)
        .animate({ left: '0%' }, 500);

Built with real jQuery 3 loaded from CDN. Every demo above uses genuine jQuery — the $() selector, effects (slideToggle, fadeToggle, animate), method chaining and event binding. The shared CSS shell provides page styling.

↑ All 64 tools