JQuery Animate() 显示与同一类中其他元素的粘性行为

Question

出于某种原因，所有 .inner-card 元素都显示某种动画，就好像它们都在不规则地计算它们的位置，而不仅仅是鼠标悬停在其上的一个元素动画干净利落。知道我该如何解决这个问题吗？

Link to Code

HTML:

    <div id="say-block">

        <div class="outer-card">
            <div class="inner-card">1</div>
        </div>

        <div class="outer-card">
            <div class="inner-card">2</div>
        </div>

        <div class="outer-card">
            <div class="inner-card">3</div>
        </div>

    </div>
</body>

这是CSS

#say-block{
    display: inline-block;
    margin-top: 1em;
    height: 4em;
    text-align: center;
    font-size: 3em;
    background-color: #B7E4DF;
    padding: 1em;
    background-image: none;
    border-radius: 0.2em;
}

.outer-card{
    border:solid;
    display: inline-block;
    text-align: center;
    width: 1em;
    background-image: none;
    border-radius: 0.2em;
}

.inner-card{
    color: #FFFFFF;
    background-color: #680148;
    background-image: none;
}

这是.JS

$(document).ready(function() {
   $('.inner-card').mouseenter(function() {
       $(this).animate({
        height: "+=0.5em"
     },
     500,
     'linear'
     );
   });
   $('.inner-card').mouseleave(function() {
       $(this).animate({
           height: "-=0.5em"
       },
       500,
       'linear'
       ); 
   }); 
});

Answer 1

我相信这是因为 .outer-card 元素上的 display: inline-block 属性。

解决它的方法是使用 float:left 代替。

所以我所做的是将 .outer-card 的 css 代码块更新为:

.outer-card{
    border:solid;
    display: block;
    float: left;
    text-align: center;
    width: 1em;
    background-image: none;
    border-radius: 0.2em;
    margin: 0 6px;
}

工作 fiddle