变形按钮 - 更快的过渡

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

  

开启过渡，当您点击按钮时 - 如何让它更快？

感兴趣的功能是： Morphing.prototype.containerMove ：

的代码行是：。的 this.container.animate（this.positions.endPosition，400，函数（）{

来自docs：

  

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

这意味着你可以对第二个参数采取行动：尝试将其更改为100。

代码段（updated jsfiddle）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;