Question

所以我创建了一个简单的变形按钮概念。一切似乎都很好。除了打开和关闭按钮大约4-5次之后，一切似乎都变得混乱并且变得混乱。

这是jQuery的一部分：

function Morphing( button, container, content) {
    this.button = button;
    this.container = container;
    this.content = content;
    this.overlay = $('div.overlay');
    this.span = $('span.close');

    var self = this; // so you have a reference to this this.

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

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

}

Morphing.prototype.startMorph = function() {
    var self = this;
    this.button.on('click', function() {
        $(this).fadeOut(200);
        // Work on from here!
        setTimeout(self.containerMove.bind(self), 200);
    });
};

Morphing.prototype.containerMove = function() {
    var self = this;
    this.overlay.fadeIn();
    this.container.addClass('active');

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

Morphing.prototype.close = function() {
    var self = this;
    this.span.on('click', function() {
        self.content.fadeOut();
        self.span.fadeOut();
        self.overlay.fadeOut();
        setTimeout(self.animateBack.bind(self), 275);
    });
};

Morphing.prototype.animateBack = function() {
    var self = this;
    this.container.animate(this.positions.startPosition, 400, function() {
        self.button.fadeIn(300);
        self.container.removeClass('active');
    });
};

另一部分：

$(document).ready(function() {

    var morph = new Morphing( $('button.morphButton'), $('div.morphContainer'), $('h1.content, p.content') );


    morph.startMorph();

});

总而言之，这就是jQuery正在做的事情：

点击按钮： 1.按钮淡出，因此，按钮后面的容器是可见的， 3.叠加淡入， 4.容器动画到屏幕中心， 5.容器中的内容淡入。

按下'X'时： 1.内容淡出， 2.叠加淡出， 3.容器动画回按钮， 4.按钮在容器上消失。

感谢。

Answer 1

每次致电：

Morphing.prototype.close = function() {
    var self = this;
    this.span.on('click', function() {
        self.content.fadeOut();
        self.span.fadeOut();
        self.overlay.fadeOut();
        setTimeout(self.animateBack.bind(self), 275);
    });
};

您可以在newContainer中为跨度定义单击。

添加：

$.fn.once = function(a, b) {
    return this.each(function() {
        $(this).off(a).on(a,b);
    });
};

在代码的末尾然后：

Morphing.prototype.close = function() {
    var self = this;
    this.span.once('click', function() {
        self.content.fadeOut();
        self.span.fadeOut();
        self.overlay.fadeOut();
        setTimeout(self.animateBack.bind(self), 275);
    });
};

它应该没问题。

Here is an updated Fiddle

jQuery - 变形按钮概念 - 问题

1 个答案: