变形按钮-更快的过渡

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，函数() {。

从医生那里：

.animate(房地产[，期限][宽松] [，完整])

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

片段(更新的小提琴)：

​

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>

​