IE9 - Animate() 从 div 的中心放大和缩小答案

【问题标题】：IE9 - Animate() with zoom in and out from the center of the divIE9 - Animate() 从 div 的中心放大和缩小
【发布时间】：2014-04-08 06:47:32
【问题描述】：

我正在尝试从 div 的中心而不是左上角放大和缩小动画（）。目前设置为 margin:auto 和 top:0；对：0；底部：0；左：0；并且适用于 Chrome/firefox/Safari（IE 9 除外）。

$(document).ready(function () {
    $('.viewportOut').mouseenter(function(e){
    $(".L3").animate({
    opacity:"1", 
    zoom: '1%'
    }, function(){ $(".L3").animate({
    opacity:"1", 
    zoom: '100%'
    });});             
});   
});

<div>
<div class="viewportOut">
<div class="L3">
<ul id="claims-list2" class="list-group">
<li><a href="#" class="list-group-item claim-item">Claim 1</a></li>
<li><a href="#" class="list-group-item claim-item">Claim 2</a></li>
<li><a href="#" class="list-group-item claim-item">Claim 3</a></li>
<li><a href="#" class="list-group-item claim-item">Claim 4</a></li>
<li><a href="#" class="list-group-item claim-item">Claim 5.</a></li>
</ul>
</div>
</div>
</div>

.viewportOut div {
position:fixed; top:0; right:0; bottom:0; left:0;
    margin:auto;
    width:300px;
    height: 200px;
    max-width:100%;
    max-height:100%;
}
 .L3 {
    overflow: hidden;
    background: red;
    border: 2px red solid;

}

这是我正在研究的 jsfiddle： http://jsfiddle.net/YHRvY/4/

doctype 是并且 meta 设置为 .

任何帮助将不胜感激。

谢谢！

【问题讨论】：

标签： css jquery-animate internet-explorer-9 zooming center

【解决方案1】：

您可能正在寻找类似的question

$(document).ready(function(){
    $('.viewportOut').hover(function() {
        $(".viewportOut").addClass('transition');
    }, function() {
        $(".viewportOut").removeClass('transition');
    });
});

DEMO

由于IE9不支持过渡动画属性，因此缩放效果不会像其他现代浏览器那样流畅

希望这会有所帮助！

【讨论】：