jquery - 边距变化导致多个div受到影响

Question

我希望我的 Logo 图像向上移动而不影响其下方的文字，但即使它们位于不同的 div 中并包裹在父 div 中，这两个元素也会被触发。我不明白。我假设它与页边距有关，但是当我尝试为文本元素反向设置相反的值时，事情表现得很奇怪。

A Fiddle

CSS:

.full-circle {
display:block;
margin:auto;
margin-top: 15px;
overflow: hidden;
height: 180px;
width: 180px;
border: 2px solid #FFF;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
background:#FDF5E6;
-webkit-transition: margin 0.2s ease-out; 
-moz-transition: margin 0.2s ease-out; 
-o-transition: margin 0.2s ease-out;
}

.full-circle:hover{margin-top: 2px;}

jQuery:

$('.full-circle').hover(
            function(){
                $(this).stop().animate(
                    {marginTop: '2'}, 20, 'linear'   
                );//end animate
            },//end function
            function(){
                $(this).stop().animate(
                {marginTop: '15'}, 20, 'linear'
                );//end animate
            }//end function
        );//end hover

Answer 1

您可以简单地将 position: relative 添加到 .full-circle，然后为 top 属性而不是 margin- 设置动画顶部。

$('.full-circle').hover(
    function(){
        $(this).stop().animate(
            {top: '-10'}, 20, 'linear'   
        );//end animate
    },//end function
function(){
    $(this).stop().animate(
        {top: '15'}, 20, 'linear'
        );//end animate
    }//end function
);//end hover

Working Demo