clearTimeout on multiple setTimeout

Not sure if you are already aware of this but, clearTimeout accepts a timeoutID that is previously returned from a call to setTimeout.

Therefore you need to assign this timeout id to a variable that remains in scope for when you need to cancel it. Then pass it to the clearTimeout call when you need to stop the loop.

As it is just an integer id, another option might be to create a custom attribute on a dom element using something like "domElement.setAttribute('timoutIDFirst');" (or attr in jQuery) and then just retrieve it using getAttribute when required.

Considering you have multiple timers, using custom attributes on the DOM elements may help keep things tidier.

EG:

      function mediumtosmall(visiblespan) {
                vt.removeClass('medium').addClass('small');

                // Store the timeoutID for this timer
                var storedTimeoutID=setTimeout(function() { smalltomedium(visiblespan); },150);
                 $('span:visible').attr('timeoutID',storedTimeoutID);

        };

and then:

    $('div.click').click(
            function(event) {
                    var visiblespan = $('span:visible');
        var invisiblespan = $('span:visible');
                    mediumtosmall(visiblespan);

                    var storedTimeoutID=invisibleSpan.attr('timeoutID');
                    // Pass the ID to clearTimeout
                    clearTimeout(storedTimeoutID);
            }
    );

Probably the best way to handle this is to use setInterval() instead of setTimeout. Like setTimeout, setInterval returns an integer, which can be passed to clearInterval() to cancel the processing.

an example would be (warning, I've not tested this at all):

function animateSizes( jQueryElement ) {
  if( jQueryElement.hasClass("big") 
    jQueryElement.removeClass("big").addClass("medium");
  else if( jQueryElement.hasClass("medium") ) 
    jQueryElement.removeClass("medium").addClass("small");
  else if( jQueryElement.hasClass("small") ) 
    jQueryElement.removeClass("small").addClass("smaller");
  else
    jQueryElement.removeClass("smaller").addClass("big");
}


function startAnimation( elem ) {
  var sizeAnimation = window.setInterval( function() {animateSizes( elem )}, 150);
  elem.attr( "sizeAnimation", sizeAnimation );
}

function stopAnimation( elem ) {
  var sizeAnimation = elem.attr("sizeAnimation");
  window.clearTimeout( sizeAnimation );
}