Question

由于某种原因，所有.inner-card元素都显示某种动画，就好像它们都在不规律地计算它们的位置，而不仅仅是鼠标悬停在它上面的一个元素被干净地动画。任何想法我该如何解决这个问题？

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

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

解决这个问题的方法是使用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

Answer 2

尝试将vertical-align: top添加到.outer-card css类。

这是有效的，因为.outer-class为display:inline-block，vertical-align属性适用于内联元素。

Code Example

JQuery Animate（）显示同一类中其他元素的粘性行为

2 个答案: