jquery动画中图像的原点（高度和宽度）_Jquery_Image_Animation_User Interface

jquery动画中图像的原点（高度和宽度）

jquery image animation user-interface

jquery动画中图像的原点（高度和宽度）,jquery,image,animation,user-interface,Jquery,Image,Animation,User Interface,在另一个网站上工作，发现一个我无法解决的问题我有一个div里面的图片。点击我使用动画（宽度，高度）。问题是这个效果从左上角开始工作，但我需要它从中下角开始工作搜索网页，但没有运气这一定是一项简单的任务，但我想不出来提前谢谢阿列克谢 #窗口教授{ 高度：250px；保证金：0自动60像素；外形：1px实心#808080；溢出：隐藏；位置：相对位置；顶部：85px；宽度：1072px；背景色：rgba（100,200,11,0.7）； } #迪夫教授{ 高度：300px

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

我有一个div里面的图片。点击我使用动画（宽度，高度）。问题是这个效果从左上角开始工作，但我需要它从中下角开始工作

搜索网页，但没有运气

这一定是一项简单的任务，但我想不出来

提前谢谢阿列克谢


#窗口教授{
高度：250px；
保证金：0自动60像素；
外形：1px实心#808080；
溢出：隐藏；
位置：相对位置；
顶部：85px；
宽度：1072px；
背景色：rgba（100,200,11,0.7）；
}
#迪夫教授{
高度：300px；
外形：1px实心#808080；
位置：绝对位置；
排名：0；
宽度：1200px；
}
.profi{
位置：相对位置；
右边距：60px；
显示：块；
浮动：左；
背景：url（images/home\u layer1.png）；
边界：8px固体；
边框颜色：rgba（255、255、255、0.7）；
边界半径：10px；
溢出：隐藏；
宽度：130px；
高度：130像素；
底部：-100px；
}
$（文档）.ready（函数（）{
$（'.profi'）。单击（函数（）{
$（this.animate（{width:'100px'，height:'100px'}）；
});
})

试试这个


$（文档）.ready（函数（）{
$（'.profi'）。单击（函数（）{
$（此）。停止（真）。设置动画({
宽度：“-=40”，
高度：“-=60”，
顶部：“+=20”，
左：“+=20”
}, 300);
});
})

如果这个解决方案不适合您的需要，我很抱歉让您耽误了时间。

不要这样，它正在工作，但我认为一定有更好的方法。无论如何，非常感谢！）还有其他解决办法吗？？？请帮忙。仍在寻找答案。

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

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