如何在動畫過程中防止子div隱藏？

Question

我在動態地改變div的寬度和高度。我的問題是，動畫中如何防止子div被隱藏。我嘗試過，但無法解決問題。我加入了小提琴如下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 1

包括在父母的CSS overflow:visible!important;。以下是演示：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; 

} 

Answer 2

使用CSS過渡，而不是jQuery的的動畫：

var wid = 100; 
 
var lft = 50; 
 
$('button').on('click', function() { 
 

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

body { 
 
    background: pink; 
 
} 
 
.slide { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 250px; 
 
    left: 50px; 
 
    margin-top: 100px; 
 
    background: #2a2a2a; 
 
    transition: all 500ms; 
 
} 
 
#handle { 
 
    position: absolute; 
 
    height: 20px; 
 
    width: 50px; 
 
    margin-top: -20px; 
 
    background: blue; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slide"> 
 
    <div id="handle"></div> 
 
</div> 
 

 
<button> 
 
    Cli 
 
</button>