具有CSS过渡效果的jquery悬停功能仅在第二个悬停上有效

Question

Very odd. The below code ONLY works on second hover. For instance the page is loaded, toggle works, but transition animation does not work until second hover each time, consistently.

jQuery :

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

CSS :

.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);
        }
    }
}

and.

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

and.

.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);
}

Answer 1

You need to make sure the element starts with the class contracted . Before I added that it only worked on second hover for me as well.

Fiddle: http://jsfiddle.net/AtheistP3ace/czrqkorn/

<div class="greenBox contracted"></div>