Question

我试图在不使用jQuery的情况下创建一个基本的slideToggle效果。目前我能够上下滑动内容但如果我点击太快，内容就会继续下降。

我还想提一下这是我第一次创建和使用Javascript动画，所以请让我知道我可以做些什么来改进我的代码。

此外，我有时间将间隔设置为1，但动画仍然很慢。有关提高速度的任何建议吗？

请查看我为演示创建的jsFiddle： 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');

非常感谢任何帮助。我现在已经连续9个小时了：）

Answer 1

增加速度控制增量，减少控制时间间隔或仅使用分数增量并将它们转换为整数值。

这是代码的代码修改：

        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);
                }


            });

这是 fiddle DEMO

使用浮点而不是整数，

修改为更慢或更快（较慢=分数为1，例如0.2），并且它们将自动转换为int，因为像素无法分割。

您可以将速度作为参数传递给函数，以使其更安全。这仅仅是对这个想法的一种表现。

Javascript - Buggy slideToggle效果（没有jQuery）

1 个答案: