Question

This is a question for the facts on .hide() and .show(). This is a dumbed down version of my code, but it explains it in generality. Since it is code that has already been built, and I am changing and adding to it, I do not want to go back through and change everything to .toggle().

Imagine that you have button 1 that is ALWAYS a .show() and button 2 is ALWAYS a .hide().

Is there any need for an IF statement? Are there any implications in NOT using the IF statement? Are there any implications if you DO use an IF statement?

$('#button1').click(function() {
if (!$("#widget").is(':visible')) { 
  $('#widget').show('fast');
}
});
$('#button2').click(function() {
if ($("#widget").is(':visible')) {  
  $('#widget').hide('fast');
}
});

OR would a direct change suffice? ::

$('#button1').click(function() {
  $('#widget').show('fast');
});

$('#button2').click(function() {
  $('#widget').hide('fast');
});

I’ve been told that there are potential issues if said IF statement is not used. What are the potential problems involved?

Answer 1

The second way is near fine. However, to deal with “fast clicking” issue you may want to consider jQuery’s .stop() or .clearQueue() functions as they will stop any previous animation and continue with the new one.

Something like:

$('#button1').click(function() {
    $('#widget').stop().show('fast');
});

$('#button2').click(function() {
    $('#widget').stop().hide('fast');
});

The big dif between the two functions is that clearQueue is meant for stoping more than animations (callback functions, listing methods, etc…). .stop() should be all you need in this case, altho you may want to test it in different browsers enabling the different parameters (.stop(false, true) …) and see how it functions in each browser and adjust it to your needs.