javascript - 从它的中心动画div

Question

我有一个 div，它会在某个 Action 出现时弹出。我不只是弹出，而是对其进行动画处理，以便在事件发生时它看起来会变大。这很好，但我希望它不是从 div 的左上角开始动画，而是希望它从 div 的中心开始动画，或 div 的中心顶部。我将如何通过仅使用 Javascript 和 jQuery 来实现这一点？

以下是我目前所拥有的。

var newsPopup = $('#news-container');
slideIntoHub(newsPopup);

// Slides any HTML object into the hub by animations
function slideIntoHub(object) {
    removeHubContents();
    object.css({'height' : '0', 'width' : '0'});
    object.appendTo('#hub');
    object.animate({width: '500', height: '200'}, 1000);
}
// Removes everything from #hub
function removeHubContents() {
    var hub = $('#hub');
    hub.children().each(function() {
        $(this).detach();
    });
}

#news-container {
    background-color: white;
    border: 15px gray outset;
    border-radius: 50px;
    padding: 10px;
}
.news-firstRow {
    width: 100%;
    display: inline-block;
}
.news-icon {
    display: inline-block;
    margin: 0 auto;
    padding-right: 50px;
    vertical-align: middle;
}
.news-title {
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
}
.news-secondRow {
    width: 100%;
    display: inline-block;
}
.news-thirdRow {
    width: 100%;
    display: inline-block;
}
.news-publishedDate {
    float: right;
    padding-bottom: 10px;
    font-size: 7px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hub">
                    <div id="news-container">
                        <div class="news-firstRow">
                            <div class="news-title">
                                <h3>Sales booming</h3>
                            </div>
                        </div>
                        <div class="news-secondRow">
                            <div class="news-description">
                                <p>The team is coming up with more products everyday</p>
                            </div>
                        </div>
                        <div class="news-thirdRow">
                            <div class="news-publishedDate">
                                <p>Published on: 3-29-2017</p>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

你可以试试这个。这是 fiddle http://jsfiddle.net/FQwYJ/260/ .这使得动画从顶部中心开始。

object.css({'height' : '0', 'width' : '0', 'margin-left':'250px'});
object.appendTo('#hub');
object.animate({width: '500', height: '200','margin-left':'0'},

以下动画从 div 本身的中心开始。 http://jsfiddle.net/FQwYJ/261/

object.css({'height' : '0', 'width' : '0', 'margin-
left':'250px','margin-top':'100px'});
object.appendTo('#hub');
object.animate({width: '500', height: '200','margin-left':'0','margin-
top':'0'}, 1000);

您可以选择使用哪一个。