Darien Fawkes Darien Fawkes - 4 months ago 13
jQuery Question

How hide div inside div when inner div mode left by jquery animate:left function?

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

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.

Comments