jQuery-变形按钮概念-问题

jQuery - Morphing button concept - Problems

本文关键字：问题 变形 按钮 jQuery-      更新时间：2023-09-26

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

这是Fiddle：https://jsfiddle.net/f793yvh5/22/

以下是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.按钮淡出，2.因此按钮后面的容器是可见的，3.叠加淡入，4.容器动画化到屏幕中心，5.容器中的内容逐渐消失。

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

谢谢。

每次呼叫：

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

应该没问题。

这是一个更新的Fiddle

相关文章：