jQuery-变形按钮概念-问题 [英] jQuery - Morphing button concept - Problems

问题描述

因此，我创建了一个简单的变形按钮概念.一切似乎都很好.除了在打开和关闭按钮约4至5次后，一切似乎都弄乱了并弄得一团糟.

这是小提琴: 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);
    });
};

应该没问题.

这里是更新的小提琴

So I have created a simple morphing button concept. Everything seems good. Except from the fact that after opening and closing the button about 4-5 times, everything seems to mess up and get muddled.

Here is the Fiddle: https://jsfiddle.net/f793yvh5/22/

Here's part of the 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');
    });
};

The other part:

$(document).ready(function() {

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


    morph.startMorph();

});

To sum up, this is what jQuery is doing:

Button is clicked: 1. Button fades out, 2. Container behind the button is therefore visible, 3. Overlay fades in, 4. Container animates to center of screen, 5. Content in container fades in.

When the 'X' is pressed: 1. Content fades out, 2. Overlay fades out, 3. Container animates back to button, 4. Button fades in over the container.

Thanks.

解决方案

Each time you call:

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

You define a on click for the span in your newContainer.

Add:

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

at the end of your code and then:

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

and it should be ok.

Here is an updated Fiddle

这篇关于jQuery-变形按钮概念-问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！