Javascript 如何防止在动画期间隐藏子div。？

我正在动态更改div的宽度和高度。我的问题是，子div在动画期间被隐藏。如何防止。？我试过了，但没能解决问题。我加了小提琴如下

HTML

---

包含

溢出：可见！重要的在父css中。以下是演示：

CSS:

HTML:

包含
溢出：可见！重要的在父css中。以下是演示：

CSS:

HTML:

使用CSS转换而不是jQuery动画：


var-wid=100；
var-lft=50；
$（'button'）。在（'click'，function（）上{
$（“.slide”）.css({
宽度：wid+“px”，
左：lft+“px”
});
wid+=50；
lft+=50；
});
正文{
背景：粉红色；
}
.幻灯片{
位置：相对位置；
高度：100px；
宽度：250px；
左：50px；
边缘顶部：100px；
背景：#2a2a；
过渡：所有500ms；
}
#处理{
位置：绝对位置；
高度：20px；
宽度：50px；
利润上限：-20px；
背景：蓝色；
z指数：1；
}

Cli
使用CSS转换而不是jQuery动画：


var-wid=100；
var-lft=50；
$（'button'）。在（'click'，function（）上{
$（“.slide”）.css({
宽度：wid+“px”，
左：lft+“px”
});
wid+=50；
lft+=50；
});
正文{
背景：粉红色；
}
.幻灯片{
位置：相对位置；
高度：100px；
宽度：250px；
左：50px；
边缘顶部：100px；
背景：#2a2a；
过渡：所有500ms；
}
#处理{
位置：绝对位置；
高度：20px；
宽度：50px；
利润上限：-20px；
背景：蓝色；
z指数：1；
}

Cli
这个
！重要信息
非常重要！jQuery在动画期间设置
溢出：隐藏
！重要信息
非常重要！jQuery在动画期间设置溢出：隐藏。
<div class="slide">
   <div id="handle">   </div> 
</div>

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

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

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

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

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

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

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

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

}