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

    }
}

最后我传递了两次运行main函数的值。

Sidebar( left );
Sidebar( right );

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

DEMO：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函数内定义的，因此您可以尝试在顶部创建一个全局变量，添加第一个单击事件后，不再添加：

在顶部：

var notAdded = true;

在侧边栏功能中：

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

希望它有所帮助！

Answer 2

原因如下：

var maskDiv = $( 'body' ).children().filter(function(){
                return $( this ).data( dataName ) === 'mask' ;
            });

和

 maskDiv.click( animationReset );

你身上有两个数据命名的'mask'元素。

因此，当您调用补充工具栏功能时，都会设置点击操作。

当你调用它两次时，你有两次重置动作......

编辑：我错了：你只有一个面具，但是当它被两个侧边栏使用时，你仍然有一个双重设置。

如何防止功能加倍动画

2 个答案: