0

我正在尝试在不使用 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 个小时了 :)

4

1 回答 1

2

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

这是您的代码的代码修改：

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


            });

这是小提琴DEMO

fiddle 修改为使用更慢或更快（更慢 = 1 的分数，例如 0.2）仅使用浮点而不是整数，并且它们将自动转换为 int，因为像素不能被分割。

您可以将速度作为参数传递给函数以使其更安全。这只是对这个想法的展示。

于 2013-07-01T01:51:50.167 回答