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

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