jQuery变形按钮概念 - fadeIn（）并不总是有效

Question

小提琴：https://jsfiddle.net/h405kbaa/

有时button.fadeIn(300);（78行和171行）似乎不起作用。

通常情况下，按第一个按钮，关闭它，按第二个按钮，关闭它，再次打开第一个按钮，然后关闭它，按钮不会淡入，而是隐藏display:none;。为什么会这样？

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行结束。两个对象都在底部调用。

Answer 1

只需从js脚本中删除此行

即可

button.fadeOut(200);

Answer 2

想出来......

没有正确定义变量：

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

应该是：

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

（逗号）。