Javascript - Buggy slideToggle effect (no jQuery)

Question

I am trying to create a basic slideToggle effect without the use of jQuery. Currently I am able to slide the content up and down but if I click too fast, the content just keeps going down.

I would also like to mention this is my first time creating and working with Javascript animations so please let me know what I can do to improve my code.

Also I have the time for the interval set to 1, but the animation is still slow. Any recommendations on increasing speed?

Please have a look at the jsFiddle I created for a demo: http://jsfiddle.net/nfKTb/3/

function cL(element) {
   console.log(element);
}

function setMinHeight(element) {

    var yourTarget = document.querySelectorAll(element),
        minHeight = 49;

    for ( var i = 0; i < yourTarget.length; i++) {
        //cL( yourTarget[i].offsetHeight );

        if ( yourTarget[i].offsetHeight > minHeight ) {

            var targetExpanded = yourTarget[i];
            var realHeight = targetExpanded.offsetHeight; 

            yourTarget[i].style.height = minHeight + 'px'; // Sets minHeight for expaned ul when loaded
        } 
    }

    targetExpanded.addEventListener('click', function(e) {

            e.preventDefault();
            var $this = this;


            function slideDown() {
                $this.style.height = minHeight + 'px';
                minHeight++;

                if (minHeight >= realHeight) {
                    clearInterval(slideDownTimer);
                } 
            }

            function slideUp() {
                $this.style.height = minHeight + 'px';
                minHeight--;

                if (minHeight <= 49) {
                    clearInterval(slideUpTimer);
                }
            }

            if (minHeight < realHeight) {
                slideDownTimer = setInterval(slideDown, 1);
            } else if (minHeight == realHeight) {
                slideUpTimer = setInterval(slideUp, 1);
            }


        });

}

setMinHeight('.dd');

Any help would be greatly appreciated. I have been at this for 9 hours straight now :)

Answer 1

to increase the speed control the increment, to decrease control the time interval or just use fraction increments and cast them to integer value.

here is the code modification on your code:

        var speed = 2.0;
        targetExpanded.addEventListener('click', function(e) {

                e.preventDefault();
                var $this = this;


                function slideDown() {
                    $this.style.height = minHeight + 'px';
                    minHeight+=speed;

                    if (minHeight >= realHeight) {
                        $this.style.height = realHeight + 'px';
                        clearInterval(slideDownTimer);
                    } 
                }

                function slideUp() {
                    $this.style.height = minHeight + 'px';
                    minHeight-=speed;

                    if (minHeight <= 58.0 ) {
                        $this.style.height = 58.0 + 'px';
                        clearInterval(slideUpTimer);
                    }
                }

                if (minHeight < realHeight) {
                    slideDownTimer = setInterval(slideDown, 1);
                } else if (minHeight == realHeight) {
                    slideUpTimer = setInterval(slideUp, 1);
                }


            });

here is the fiddle DEMO

fiddle modified to work with slower or faster (slower = fractions of 1 e.g. 0.2) just using floating points instead of integers, and they will be cast automatically to int as a pixel cannot be divided.

you can pass the speed to the function as a parameter to make it safer. this is merely a demonstration of the idea.