jquery动画中图像的来源（高度和宽度）答案

【问题标题】：Origin of image in jquery animation (height and width)jquery动画中图像的来源（高度和宽度）
【发布时间】：2014-04-28 04:49:21
【问题描述】：

在另一个网站上工作，发现一个我无法解决的问题

我在 div 中有一张图片。单击时我使用动画（宽度，高度）。问题是该效果从左上角起作用，但我需要它从底部中间起作用。

搜索网络，但没有运气。

这一定是一个简单的任务，但我想不通。

jsfiddle

提前致谢阿列克谢

<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>

【问题讨论】：

任何其他解决方案？？？请帮忙。仍在寻找答案。

标签： jquery image animation user-interface

【解决方案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>

如果此解决方案不能满足您的需求，我很抱歉让您浪费时间。

【讨论】：

别这样，它正在工作，但我认为必须有更好的方法。无论如何，非常感谢！ )