Question

在另一个网站上工作，找到一个我无法弄清楚的问题

我在div里面有一张照片。点击我使用动画（宽度，高度）。问题是左上角有效，但我需要它从底部中间工作。

搜索网络，但没有运气。

它必须是一项简单的任务，但我无法理解。

提前致谢克塞

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>

#prof_window{
    height: 250px;
    margin: 0 auto 60px;
    outline: 1px solid #808080;
    overflow: hidden;
    position: relative;
    top: 85px;
    width: 1072px;
    background-color: rgba(100, 200, 11, 0.7);
}

#prof_div{
    height: 300px;
    outline: 1px solid #808080;
    position: absolute;
    top: 0;
    width: 1200px;
}

.profi{
    position: relative;
    margin-right: 60px;
    display: block;
    float: left;
    background: url(images/home_layer1.png);
    border: 8px solid;
    border-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    overflow: hidden;
    width: 130px;
    height: 130px;
    bottom: -100px;
}

</style>
</head>
<body>
<div id="prof_window">
    <div id="prof_div">
        <div class="profi"><img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""></div>
        <div class="profi"><img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""></div>
        <div class="profi"><img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""></div>
        <div class="profi"><img src="http://www.luxmed.co.il/wp-content/uploads/2014/03/Дан-Флис.jpg" alt=""></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>

<script>

$(document).ready(function(){
    $('.profi').click(function() {
        $(this).animate({width: '100px', height: '100px'});
    });
})
</script>
</body>
</html>

Answer 1

试试这个Fiddle

<script type="text/javascript">
$(document).ready(function(){
    $('.profi').click(function() {
        $(this).stop(true).animate({
            width: "-=40",
            height: "-=60",
            top: "+=20",
            left: "+=20"
        }, 300);
    });
})
</script>

如果此解决方案不符合您的需求，我会为您浪费时间而道歉。

jquery动画中图像的起源（高度和宽度）

1 个答案: