CODEWITHSUNDEEP
javascriptjquerycss
Lieutenant Dan
Lieutenant Dan

Reputation: 8274

jquery hover function with CSS transition effect ONLY working on second hover

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

Upvotes: 0

Views: 530

Answers (1)

AtheistP3ace
AtheistP3ace

Reputation: 9691

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>

Upvotes: 2

Related Questions