Question

当某个操作出现时，我会弹出一个div。而不仅仅是弹出，我动画它，所以当事件发生时它看起来会变大。这很好，但是我希望它不是从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

你可以试试这个。继承人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);

你可以选择使用哪一个。

Answer 2

尝试css3 transform：scale属性以获得最佳结果

$(document).ready(function(){
  $('button').on('click', function(){
    $('div').toggleClass('scale-it');
  })
});

div{
  height: 150px;
  width: 150px;
  border: 5px solid crimson;
  transform: scale(0);
  transition: 0.5s ease-in-out all;
}
.scale-it{
  transform: scale(1);
  }

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

从它的中心动画div

2 个答案: