javascript - 变形按钮 - 更快的过渡

Question

好的，所以我的问题对你们中的一些人来说可能很简单。但我似乎无法弄清楚，所以这里......

我找到了这个 Fiddle对于变形按钮的概念，来自 this question .这太棒了!正是我需要的。我只想做一个调整。打开过渡，当你点击按钮时 - 我怎样才能让它更快？所以它在打开时不会“滞后”，而是打开得更快。哪一行 JS 负责？

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!
        console.log(self);
        setTimeout(self.containerMove.bind(self), 200);
    });
};

Morphing.prototype.containerMove = function() {
    var self = this;
        console.log(self);
    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;
        console.log(self);
    this.span.once('click', function() {
        self.content.fadeOut();
        self.span.fadeOut();
        self.overlay.fadeOut();
        setTimeout(self.animateBack.bind(self), 275);
    });
};

Morphing.prototype.animateBack = function() {
    var self = this;
        console.log(self);
    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();

});

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

谢谢!

Answer 1

The opening transition, when you click on the button - how can I make it faster?

感兴趣的函数是:Morphing.prototype.containerMove:

这行代码是:this.container.animate(this.positions.endPosition, 400, function() {.

来自文档:

.animate( properties [, duration ] [, easing ] [, complete ] )

这意味着您可以对第二个参数进行操作:尝试将其更改为 100。

片段(updated jsfiddle):

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, 100, function() {
        self.content.fadeIn();
        self.span.fadeIn();
        self.close();
    });
};

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

Morphing.prototype.animateBack = function() {
    var self = this;
    
    this.container.animate(this.positions.startPosition, 100, 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();

});

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

body {
    background-color: green;
    font-family: 'Cabin';
}

button.morphButton {
    position: absolute;
    left: 20%;
    top: 150px;
    margin-left: -100px;
    width: 200px;
    height: 70px;
    background-color: #3C6DE2;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
}

div.morphContainer {
    position: absolute;
    left: 20%;
    top: 150px;
    margin-left: -100px;
    width: 200px;
    height: 70px;
    background-color: #3C6DE2;
    z-index: 9;
}

button.newButton {
    position: absolute;
    left: 70%;
    top: 300px;
    width: 200px;
    height: 70px;
    margin-left: -100px;
    background-color: black;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
}

div.newContainer {
    position: absolute;
    left: 70%;
    top: 300px;
    margin-left: -100px;
    width: 200px;
    height: 70px;
    background-color: /*#3C6DE2*/black;
    z-index: 9;
}

div.active {
    z-index: 30;
}

h1, p {
    display: none;
    margin: 50px;
}

h1 {
    color: white;
}

p {
    color: white;
    line-height: 25px;
    font-size: 18px;
    margin-top: 0;
}

span.close {
    display: none;
    font-size: 20px;
    z-index: 10;
    color: white;
    cursor: pointer;
    right: 40px;
    top: 30px;
    position: absolute;
    transition:color 0.2s;
    -webkit-transition:color 0.2s;
}

span.close:hover {
    color: red;
}

div.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button class="morphButton">Terms & Conditions</button>

<div class="morphContainer">
    <span class="close">X</span>
    <h1 class="content">Terms & Conditions </h1>
    <p class="content"> Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut juccama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
</div>

<button class="newButton">New</button>

<div class="newContainer">
    <span class="close">X</span>
    <h1 class="newContent">New Stuff</h1>
    <p class="newContent">Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut juccama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.</p>
</div>




<div class="overlay"></div>