在javascript或jQuery插件中,完全缩放div及其内容？

Question

我希望实现如metalabs网站的图像更换器/滑块上看到的效果:

http://metalabdesign.com/

我得到了它的工作,但问题是我没有使用图像,我正在缩放内容中的内容.动态内容可能会发生变化.有没有办法可以炸毁整个div及其内容,因为手动缩放div中的每个元素是一个巨大的麻烦.

我正在使用jQuery动画缩放div:

开始css:

#tagBox {
    display: none;
    width: 1280px;
    height: 1000px;
    position: absolute !important;
    left: 50% !important;
    margin-left: -640px;
    top: 50% !important;
    margin-top: -500px;
    opacity: 0;
}

改变它的jQuery.

$('#tagBox').show().animate({
    opacity: 1,
    width: 700,
    height: 500,
    marginLeft: '+=275px',
    marginTop: '+=250px'
}

但那只能激活div.div的内容保持固定在右上角.我正在寻找一种模仿动画的方法,但只是将div作为一个整体,所有元素一起缩放,最好是在普通的javascript中.

谢谢!

Answer 1

你可以使用css3转换.

-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);

检查它 - http://jsfiddle.net/6gJka/2/.