Question

我想从中间扩展我的img。现在它从左上角开始。这是我的代码：

$( document ).ready(function() {
    $("#logo").animate({
        height: '+=100%',
        width: '+=100%'
    });

});

#logoblock
{
    position: relative;
    width: 700px;
    height: 700px;
    margin: auto;
}
#logo
{
    position: absolute;
    width: 0%;
    height: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="logoblock">
    <div id="logo">
    <img src="http://placehold.it/700x700">
    </div>
</div>

这可能吗？

Answer 1

如果您不想更改CSS并且只想更改jQuery，则可以执行此操作

CSS：

#logo img { 
     -webkit-transform: scale(0) 
     -moz-transform: scale(0); 
     -ms-transform: scale(0); 
     -o-transform: scale(0);
        transform:scale(0);
     -webkit-transition: all 0.8s ease; 
     -moz-transition: all 0.8s ease; 
     -ms-transition: all 0.8s ease; 
     -o-transition: all 0.8s ease;
      transition: all 0.8s ease;
 }

jQuery：

    var val = 1;
    $('img').css({
        '-webkit-transform': 'scale(' + val + ')',
        '-moz-transform': 'scale(' + val + ')',
        '-ms-transform': 'scale(' + val + ')',
        '-o-transform': 'scale(' + val + ')',
        'transform': 'scale(' + val + ')'
    });

通过更改transition-duration，您可以增加/减少缩放延迟。

此处我还创建了JSFiddle

Answer 2

我认为您可以添加额外的动画方向：从初始中心位置（left: 50%，top: 50%）到left: 0和top: 0。也许是这样的：

$(document).ready(function() {
    $("#logo").animate({
        height: '+=100%',
        width: '+=100%',
        left: '0',
        top: '0'
    });
});

#logoblock {
    position: relative;
    width: 700px;
    height: 700px;
    margin: auto;
}
#logo {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="logoblock">
    <div id="logo">
    <img src="http://placehold.it/700x700">
    </div>
</div>

Answer 3

试试这段代码 .thumb {display：inline-block;宽度：200px;身高：200px; 保证金：5px; border：3px solid＃c99;背景位置：中心; background-size：cover;}

如何在jquery中从中间扩展我的图像？

3 个答案: