Question

My first implementation of my personal learning project of dynamically generated webpages and JQuery project utilized checkboxes and toggle(“slow”) and toggle(“fast”). However, being new to CS altogether, managing the state of checkboxes got q bit complex for my first project. So I switched solely to <label>s and .on('click', function(){...}) and $('*').click(function(){...}) with .toggleClass('hidden') to handle my UX. The CSS for the hidden class is :

.hidden {
    display: none;
}

The problem now is that the toggling of the class happens instantaneously, and I would like the user to be able to see the .toggle() just as .toggle('slow') or .toggle('fast'). how would I convert the following line to achieve this visual feedback?

$(this).toggleClass('hidden');

I have reviewed the APIs for toggle, toggleClass, and slideToggle, and was curious if a certain combination would work. If I have to rewrite it to toggle(), how do I include the showOrHide parameter, along with the “show” or “fast” duration, as I need to verify current state, similar to .toggleClass()‘s [switch] parameter.

Answer 1

You can’t animate the addition or removal of a class – a class is either there or not. The .toggle('fast') effect is produced by animating specific CSS properties of the element before hiding it.

“If I have to rewrite it to toggle(), how do I include the showOrHide parameter, along with the “show” or “fast” duration, as I need to verify current state, similar to .toggleClass()'s [switch] parameter.”

Since there is not currently a version of .toggle() that works like this:

$(this).toggle('fast', showOrHide)

…you can instead do this:

$(this)[showOrHide ? "show" : "hide"]('fast');

…which is a shorthand way of saying:

if (showOrHide)
   $(this).show('fast');
else
   $(this).hide('fast');

If you want to run a callback function on complete of the show/hide then:

$(this)[showOrHide ? "show" : "hide"]('fast', function() { ... });