Navaneeth Venugopal Navaneeth Venugopal - 6 months ago 13
HTML Question

How to avoid content in the inside div appearing first on hover?

I have created a expanding div on hover. Here is the Fiddle i created



.outer {
height: 100px;
width: 200px;
border: 1px solid #000;
overflow: hidden;
transition: height 0.8s;
-webkit-transition: height 0.8s;
}

.innerone {
height: 100px;
}

.outer:hover {
overflow: visible;
height: 160px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>

<div class="outer">
<div class+="innerone">

<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class+="inner">



<button type="button" class="btn btn-default">Default</button>
</div>
</div>





http://jsfiddle.net/ab4Lfdhu/35/


But the problem is content inside the expanding div appear first even before div completing its full expanding transition . How to avoid it ?

Answer

For transitions, you can use the following snippet of jQuery to detect that the animation has finished:

$(".outer").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    overflow: visible;
});

Example fiddle: http://jsfiddle.net/db3p5nrv/