mkHun mkHun - 6 months ago 11
HTML Question

How to prevent the child div hiding during animation.?

I am dynamically changing the width and height of the div. My problem is, the child div is hidden during animation how to prevent is.? I tried, but couldn't resolve the problem. I added the fiddle as follow JS fiddle

HTML

<div class="slide">
<div id="handle"> </div>
</div>

<button onclick="cl()" >
Cli
</button>


Javascript

var wid = 100;
var lft = 50;
cl = function()
{

$(".slide").animate({width:wid+"px", left:lft+"px"}, {duration: 500})
wid += 50;
lft +=50;
}

Answer

Include overflow:visible!important; in parent css. Here is the demo: http://jsfiddle.net/MRkhu/11/

CSS:

body
{
  background:pink;

}
.slide {
    position: relative;
    height: 100px; 
    width: 250px;
    margin-top: 100px;
    background:#2a2a2a;
     overflow:visible!important;
}

#handle {
    position: absolute;
    height: 20px;
    width: 50px;
    margin-top:-20px;
    background:blue;
    z-index:1;
}

HTML:

<div class="slide">
   <div id="handle" class="child">   </div> 
</div>

<button onclick="cl()" >
Click
</button>

JS:

var wid = 100;
var lft = 50;
cl = function()
{

$(".slide").animate({width:wid+"px", left:lft+"px"}, {duration: 500})
wid += 50;
lft +=50;

}
Comments