当jQuery animate：left函数离开内部div模式时，如何在div内部隐藏div？

Question

I have 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>

I try to make small move div.innerDiv by:

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

Basic idea - when div.innerDiv move to border of div.outerDiv, div.outerDiv should hide part of div.innerDiv. I stuck on css styles on div's.

Answer 1

see here : jsfiddle

you need to set a position ( relative,absolute,fixed ) so the css left:200px can work.

css :

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

jq :

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

let me know if this was what you were looking for.

Answer 2

If i understand you correctly, you want to hide the outer div but show the inner div.

You should not hide parent div, because if you hide parent div, child will be hidden.

You can change the background color of the outer div.

js fiddle link

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