Question

我有html：

<div style='width:300px; height:40px; float:left;' class='outerDiv'>
    <div style='width:200px; height:40px; float:right;' class='innerDiv'>
        Some text


    </div>
</div>

我尝试通过以下方式进行小动作div.innerDiv：

$('.innerDiv').animate({ left: '+=200px' });

基本思路 - 当div.innerDiv移动到div.outerDiv的边框时，div.outerDiv应该隐藏div.innerDiv的一部分。我坚持使用div的css样式。

Answer 1

请参阅此处： jsfiddle

你需要设置一个位置（相对的，绝对的，固定的），这样css left:200px就可以了。

css：

.outerDiv {
  overflow:hidden;
 }
.innerDiv {
  position:relative;
 }

jq：

$('.innerDiv').animate({ left: '+=200px' });

请告诉我这是否是您要找的。

Answer 2

如果我理解正确，你想要隐藏外部div但显示内部div。

你不应该隐藏父div，因为如果你隐藏父div，则会隐藏child。

您可以更改外部div的背景颜色。

js fiddle link

$('.innerDiv').animate({left:'200px'}, {
complete: function () {
    $('.outerDiv').addClass('hide');
}
}
);

当内部div模式由jquery animate留下时，如何在div中隐藏div：left function？

2 个答案: