Javascript jQuery变形按钮概念-fadeIn（）不总是起作用

小提琴：

有时会按下按钮。fadeIn300；第78行和第171行似乎不起作用

通常，如果按第一个按钮，关闭它，再按第二个按钮，关闭它，再次打开第一个按钮，然后关闭它，按钮将不会消失，而是隐藏显示：无；。为什么会这样

jQuery：

$(document).ready(function() {

    // fix span and display on button

    var morphObject = {

        button: $('button.morphButton'),
        container: $('div.morphContainer'),
        overlay: $('div.overlay'),
        content: $('h1.content, p.content'),

        endPosition: {
            top: 100,
            left: '50%',
            width: 600,
            height: 400,
            marginLeft: -300
        },


        init: function() {
            var mO = morphObject,
                button = mO.button;

            button.on('click', function() {
                button.fadeOut(200);
                setTimeout(mO.containerMove, 200);
            });

        },

        containerMove: function() {
            var mO = morphObject,
                content = mO.content,
                overlay = mO.overlay,
                container = mO.container,
                span = $('span.close');

            overlay.fadeIn();
            container.addClass('active');

            container.animate(mO.endPosition, 400, function() {
                    content.fadeIn();
                    span.fadeIn();
                    mO.close();
            });

        },

        close: function() {
            var mO = morphObject,
                container = mO.container,
                overlay = mO.overlay,
                content = mO.content;

            if ( container.find('span.close').length ) return;

            $('<span class="close">X</span>').appendTo(container);

            var span = $('span.close');

            span.on('click', function() {
                content.fadeOut();
                span.fadeOut();
                overlay.fadeOut();
                setTimeout(mO.animateBack, 200);
            });

        },

        animateBack: function() {
            var mO = morphObject,
                container = mO.container;
                button = mO.button;

            container.animate(mO.startPosition, 400, function() {
                    container.removeClass('active');
                    button.fadeIn(300);
            });

        }

    }

    // End of morphObject One

    var container = morphObject.container;

    morphObject.startPosition = {
        top: container.css('top'),
        left: container.css('left'),
        width: container.css('width'),
        height: container.css('height'),
        marginLeft: container.css('margin-left')
    };


    var morphObjectTwo = {

        button: $('button.newButton'),
        container: $('div.newContainer'),
        overlay: $('div.overlay'),
        content: $('h1.newContent, p.newContent'),

        endPosition: {
            top: 100,
            left: '50%',
            width: 600,
            height: 400,
            marginLeft: -300
        },


        init: function() {
            var mO = morphObjectTwo,
                button = mO.button;

            button.on('click', function() {
                button.fadeOut(200);
                setTimeout(mO.containerMove, 200);
            });

        },

        containerMove: function() {
            var mO = morphObjectTwo,
                content = mO.content,
                overlay = mO.overlay,
                container = mO.container,
                span = $('span.close');

            overlay.fadeIn();
            container.addClass('active');

            container.animate(mO.endPosition, 400, function() {
                    content.fadeIn();
                    span.fadeIn();
                    mO.close();
            });

        },

        close: function() {
            var mO = morphObjectTwo,
                container = mO.container,
                overlay = mO.overlay,
                content = mO.content;

            if ( container.find('span.close').length ) return;

            $('<span class="close">X</span>').appendTo(container);

            var span = $('span.close');

            span.on('click', function() {
                content.fadeOut();
                span.fadeOut();
                overlay.fadeOut();
                setTimeout(mO.animateBack, 200);
            });

        },

        animateBack: function() {
            var mO = morphObjectTwo,
                container = mO.container;
                button = mO.button;

            container.animate(mO.startPosition, 400, function() {
                    container.removeClass('active');
                    button.fadeIn(300);
            });

        }

    }

    var container = morphObjectTwo.container;

    morphObjectTwo.startPosition = {
        top: container.css('top'),
        left: container.css('left'),
        width: container.css('width'),
        height: container.css('height'),
        marginLeft: container.css('margin-left')
    };

    morphObject.init();
    morphObjectTwo.init();

});

---

请注意，jQuery包含两个相同的对象，只是不同按钮、容器等的属性不同。这意味着您需要更改这两个对象上的代码。第一个对象在第85行结束，第二个对象在第176行结束。这两个对象都在底部调用。

只需从js脚本中删除这一行即可

button.fadeOut(200);

我想出来了

没有正确定义变量：

    animateBack: function() {
        var mO = morphObject,
            container = mO.container;
            button = mO.button;

应该是：

    animateBack: function() {
        var mO = morphObject,
            container = mO.container,
            button = mO.button;

---

逗号。

那会破坏整个概念。。这是一个变形按钮。