我正在尝试使用div中心(而不是左上角)放大和缩小animate()的效果。当前设置为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设置为
。
任何帮助将不胜感激。
谢谢!
最佳答案
您可能正在寻找类似的question
$(document).ready(function(){
$('.viewportOut').hover(function() {
$(".viewportOut").addClass('transition');
}, function() {
$(".viewportOut").removeClass('transition');
});
});
DEMO
因为IE9缩放效果不支持过渡动画属性,所以不会像其他现代浏览器那样平滑
希望这可以帮助!