Javascript 从div的中心设置div的动画

我有一个

div

，当某个动作出现时会弹出。我给它设置了动画，使它在事件发生时看起来越来越大，而不是突然出现。这很好，但我希望它不是从

div

的左上角动画，而是从

div

的中心或

div

的中心顶部动画。仅使用Javascript和jQuery如何实现这一点

以下是我现在所拥有的

var newspoop=$（“#新闻容器”）；
slideIntoHub（新闻弹出窗口）；
//通过动画将任何HTML对象滑入中心
函数slideIntoHub（对象）{
移除内容（）；
css（{'height'：'0'，'width'：'0'}）；
object.appendTo（“#hub”）；
动画（{宽度：'500'，高度：'200'}，1000）；
}
//从#中心删除所有内容
函数removeHubContents（）{
var hub=$（“#hub”）；
hub.children（）.each（函数（））{
$（this.detach（）；
});
}

#新闻容器{
背景色：白色；
边框：15px灰色；
边界半径：50px；
填充：10px；
}
.第一排新闻{
宽度：100%；
显示：内联块；
}
.新闻图标{
显示：内联块；
保证金：0自动；
右边填充：50px；
垂直对齐：中间对齐；
}
.新闻标题{
显示：内联块；
保证金：0自动；
垂直对齐：中间对齐；
}
.第二排新闻{
宽度：100%；
显示：内联块；
}
.第三条新闻{
宽度：100%；
显示：内联块；
}
.新闻发布日期{
浮动：对；
垫底：10px；
字体大小：7px；
}

销售兴旺
该团队每天都会推出更多的产品

出版日期：2017年3月29日

您可以试试这个。小提琴在这儿。这将使动画从顶部中心开始

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

以下动画从div本身的中心开始

---

你可以选择使用哪一种。你可以试试这个。小提琴在这儿。这将使动画从顶部中心开始

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

以下动画从div本身的中心开始

---

您可以选择使用哪一个。

尝试css3 transform:scale属性以获得最佳效果

$（文档）.ready（函数（）{
$（'button'）。在（'click'，function（）上{
$（'div'）。toggleClass（'scale-it'）；
})
});
div{
高度：150像素；
宽度：150px；
边框：5px深红色；
变换：比例（0）；
过渡：0.5s全进全出；
}
.缩放它{
变换：比例（1）；
}
点击
尝试css3变换：缩放属性以获得最佳效果


$（文档）.ready（函数（）{
$（'button'）。在（'click'，function（）上{
$（'div'）。toggleClass（'scale-it'）；
})
});
div{
高度：150像素；
宽度：150px；
边框：5px深红色；
变换：比例（0）；
过渡：0.5s全进全出；
}
.缩放它{
变换：比例（1）；
}
点击
你可以使用CSS动画吗？是的，我可以使用CSSY你可以这样做：。你可以使用CSS动画吗？是的，我可以使用CSSY你可以这样做：。