jQuery更顺畅：

Question

我有一个覆盖整个页面的DIV（高度和宽度都是100％）。我正在尝试使用CSS（可能还有JavaScript）来创建缩小动画效果，因此DIV更小（将div中的所有内容 - 其子项也更小）到页面上的特定点（页面中间）以及特定的width和height（例如100 * 100px）。

我从以下代码开始：

<div id="toBeZoomedOut">
  <div>something</div>
  <div><img src="background.jpg"></div>
</div>

#toBeZoomedOut {
   background-color: black;
   border: 1px solid #AAAAAA;
   color: white;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
   -webkit-transition: 1s ease-in-out;
   -moz-transition: 1s ease-in-out;
   transition: 1s ease-in-out;
}

#toBeZoomedOut img {
   height: 250px;
   width: 250px;
}

#toBeZoomedOut:hover {
   zoom: 0.5;
}

此代码的问题在于它缩小了组件向下（父div）并立即缩小其中的内容然后返回放大组件。

基本上它是一个小马车。任何有用的修复，使它一起缩小所有内容？如果我可以将所有内容缩小到页面上的特定位置和特定的宽度/高度（例如，将所有内容缩小到左侧：100px，顶部：100px，父div应该是：100px * 100px，那将是很棒的其他一切都是相对的大小。）

我知道使用JavaScript可能会更容易吗？有什么帮助吗？

最后一点，如果您注意到动画并未真正反映缩放动画。虽然这将是一个额外的加分，但实际的缩放动画会很棒。

JSFiddle链接使其更容易：http://jsfiddle.net/HU46s/

Answer 1

我正在使用通用选择器来定位父容器内的所有内容，以便将css过渡应用于它。

我做的下一件事是将内部内容宽度更改为%以便于扩展。

这是css：

#toBeZoomedOut * {
   -webkit-transition: all 1s ease;
   -moz-transition: 1s ease;
   transition: 1s ease;
}

最后，小提琴：Demo

Answer 2

要使所有图像和div背景同时缩放，您必须使用＃zoomer-inside元素的百分比大小并设置特定的字体大小......

但是不顺利，如果你想要更平滑的结果，我建议你将jQuery与一些animation（）方法或插件结合使用。

小提琴： http://jsfiddle.net/HU46s/1/

<强>代码：

#toBeZoomedOut {
   background-color: black;
   border: 1px solid #AAAAAA;
   color: white;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}
#toBeZoomedOut div, #toBeZoomedOut img {
   width: 90%;
   font-size: 20px;
}
#toBeZoomedOut img {
   height: 90%;
   width: 90%;
}

#toBeZoomedOut:hover {
   zoom: 0.5;
}

jQuery更顺畅：

小提琴： http://jsfiddle.net/HU46s/5/

<强>代码： jQuery - 更顺畅的解决方案（更少的CSS）：

 $('#toBeZoomedOut').hover( /* change the animation speed as you want :) */
     function(){
        $(this).animate({ 'zoom': 0.5}, 400); //animation speed 400=0.4s !
     },
     function(){
        $(this).animate({ 'zoom': 1}, 400); //animation speed 400=0.4s !
     }
 );

...只需要这个CSS：

#toBeZoomedOut {
   background-color: black;
   border: 1px solid #AAAAAA;
   color: white;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
}

#toBeZoomedOut img {
   width: 250px;
}

如何使用动画缩小div？

2 个答案:

jQuery更顺畅：