Javascript 带有CSS转换效果的jquery悬停函数仅在第二次悬停时工作

很奇怪。以下代码仅在第二次悬停时有效。例如，加载页面时，“切换”起作用，但每次第二次悬停时，转换动画始终不起作用

jQuery：

$('.greenBox').hover(function(){
    $(this).addClass('expanded');
    $(this).removeClass('contracted');
}, function(){
    $(this).removeClass('expanded');
    $(this).addClass('contracted');
});

.greenBox {
    background-image: url("../images/background_bubble.png");
    background-repeat: no-repeat;
    // transition:max-height .5s linear;
    // background: linear-gradient(#69af38, #8fba35);
    transition: .8s; 
    color: #FFF; 
    width: 310px; 
    height: 137px;
    position: relative; 
    overflow:hidden;
    z-index: 2;
    display: block;
    // -moz-transition: background-color 0.5s ease, height 0.5s ease, bottom 0.5s ease;
    // -o-transition: background-color 0.5s ease, height 0.5s ease, bottom 0.5s ease;
    // -webkit-transition: background-color 0.5s ease, height 0.5s ease, bottom 0.5s ease;  /* Chrome 1-25, Safari 3.2+ */
    // transition: background-color 0.5s ease, height 0.5s ease, bottom 0.5s ease;
    overflow: hidden;
    bottom: 7px;
    // -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 60% 75%, 49% 86%, 37% 75%, 0% 75%); 
    // clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 60% 75%, 49% 86%, 37% 75%, 0% 75%);
    .noLink {
        color: #FFF;
        &:hover {
            cursor: auto;
            color: #FFF;
            background: linear-gradient(#69af38, #8fba35);
        }
    }
}

CSS：

$('.greenBox').hover(function(){
    $(this).addClass('expanded');
    $(this).removeClass('contracted');
}, function(){
    $(this).removeClass('expanded');
    $(this).addClass('contracted');
});

.greenBox {
    background-image: url("../images/background_bubble.png");
    background-repeat: no-repeat;
    // transition:max-height .5s linear;
    // background: linear-gradient(#69af38, #8fba35);
    transition: .8s; 
    color: #FFF; 
    width: 310px; 
    height: 137px;
    position: relative; 
    overflow:hidden;
    z-index: 2;
    display: block;
    // -moz-transition: background-color 0.5s ease, height 0.5s ease, bottom 0.5s ease;
    // -o-transition: background-color 0.5s ease, height 0.5s ease, bottom 0.5s ease;
    // -webkit-transition: background-color 0.5s ease, height 0.5s ease, bottom 0.5s ease;  /* Chrome 1-25, Safari 3.2+ */
    // transition: background-color 0.5s ease, height 0.5s ease, bottom 0.5s ease;
    overflow: hidden;
    bottom: 7px;
    // -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 60% 75%, 49% 86%, 37% 75%, 0% 75%); 
    // clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 60% 75%, 49% 86%, 37% 75%, 0% 75%);
    .noLink {
        color: #FFF;
        &:hover {
            cursor: auto;
            color: #FFF;
            background: linear-gradient(#69af38, #8fba35);
        }
    }
}

和。

.contracted {
    // transition: 11s;
    max-height: 150px;
    overflow:hidden;
}

.expanded { 
    height: auto;
    min-height:150px;
    max-height:750px; 
    // transition: 11s;
    // margin-top:5px;
    // to make the box move up add back the bottom 300px
    // bottom: 300px;
    background: linear-gradient(#812990, #9e248e);
    -webkit-transition-timing-function: linear; 
    transition-timing-function: linear;
    background: -webkit-linear-gradient(#812990, #9E248E);
}

和。

.contracted {
    // transition: 11s;
    max-height: 150px;
    overflow:hidden;
}

.expanded { 
    height: auto;
    min-height:150px;
    max-height:750px; 
    // transition: 11s;
    // margin-top:5px;
    // to make the box move up add back the bottom 300px
    // bottom: 300px;
    background: linear-gradient(#812990, #9e248e);
    -webkit-transition-timing-function: linear; 
    transition-timing-function: linear;
    background: -webkit-linear-gradient(#812990, #9E248E);
}

---

您需要确保元素以类

contracted

开头。在我补充说它只在第二次悬停时对我有效之前

小提琴：

确保初始元素具有类

压缩的

简化语法，以便于OP使用：gracias！！简化总是更好！当然，您甚至不需要为此编写脚本。