javascript - 如何防止函数双重动画

Question

在我的插件中，我通过在外部函数中传递方法来处理动画。

首先我必须检查侧边栏是否存在:

var left  = cfg.left.selector,
    right = cft.right.selector; 

function Sidebar( e ) {
        if ( e == undefined ) {
            console.log( "WARNING: A (or more) sidebar(s) has been left behind" );
        } else {
            var align, sbw, marginA, marginB, $sbRight, $sbLeft,
                $sidebar = $( e );

一旦我确定侧边栏(或者可能只有一个)存在，我就会定义为所有元素设置动画所需的变量:

            switch ( e == cfg.right.selector ) {
                case true:
                    align    = "right";
                    marginA  = "margin-right";
                    marginB  = "margin-left";
                    $sbRight = $( cfg.right.selector );
                    break;
                case false:
                    align    = "left";
                    marginA  = "margin-left";
                    marginB  = "margin-right";
                    $sbLeft  = $( cfg.left.selector );
                    break;
            }

        var def       = cfg[align], //new path to options
            $opener   = $( def.opener ),
            sbMaxW    = def.width,
            gap       = def.gap,
            winMaxW   = sbMaxW + gap,
            $elements = //a very long selector,
            w         = $( window ).width();

        //defining sbw variable
        if ( w < winMaxW ) {
            sbw = w - gap;
        } else {
            sbw = sbMaxW;
        }

        //setting $sidebar initial position and style
        var initialPosition = {
            width: sbw,
            zIndex: cfg.zIndex
        };
        initialPosition[marginA] = -sbw;
        $sidebar.css( initialPosition );

这是动画。它们被作为外部函数处理。第一个动画效果非常好。它完成了它的工作:

        //Animate $elements to open the $sidebar
        var animateStart = function() {
            var ssbw = $sidebar.width();
                animation = {};

            animation[marginA] = '+=' + ssbw;
            animation[marginB] = '-=' + ssbw;

            $elements.each(function() {
                $( this ).animate( animation, {
                    duration: duration,
                    easing: easing,
                    complete: function() {
                        $( 'body, html' ).attr( 'data-' + dataName, 'overflow' );
                        maskDiv.fadeIn();
                    }
                });
            });
        },

但是当存在两个侧边栏时，第二个会加倍!!我需要检索 .wrapper 偏移量，然后根据其值移动 $elements 。所以我认为它的工作原理与第一个动画函数一样，并且就像那里一样简单:

            animationReset = function() {
                var offset = $wrapper.offset().left;
                    reset = {};

                console.log( offset );

控制台返回两倍的值，因此动画加倍。

                reset[marginA] = '-=' + offset;
                reset[marginB] = '+=' + offset;

                $elements.each(function() {
                    $( this ).animate( reset, {
                        duration: duration,
                        easing: easing,
                        complete: function() {
                            maskDiv.fadeOut(function() {
                                $( 'body, html' ).removeAttr( 'data-' + dataName );
                            });
                        }
                    });
                });
            };

现在我在点击函数上运行动画。

        $( $opener ).click( animateStart );
        maskDiv.click( animationReset );

    }
}

最后，我传递运行主函数两次的值。

Sidebar( left );
Sidebar( right );

为什么它在第一个动画中起作用，然后在第二个动画中加倍？

演示:http://dcdeiv.github.io/amazing-sidebar/

完整代码:https://github.com/dcdeiv/amazing-sidebar/blob/master/development/jquery.amazingsidebar.js

Answer 1

我认为问题是您在

处添加了两次点击事件

maskDiv.click( animationReset );

因为 maskDiv 是网站的主要 div，而且只有一个，但循环执行了两次。

尝试将其从循环定义中取出并只执行一次，但这可能很困难，因为它是在 Sidebar 函数内定义的，因此您可以尝试在top，添加第一个点击事件后，不再添加:

顶部:

var notAdded = true;

在侧边栏功能中:

$( $opener ).click( animateStart );
if(notAdded){
    maskDiv.click( animationReset );    
    notAdded = false;
}

希望对你有帮助!