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 animate：

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>

如何在动画过程中防止子div隐藏。

2 个答案: