Menu
do you know why i cant animate a absolute-positioning div with jQuery?
show please here (here is my example ):
http://jsfiddle.net/2VJe8/
HTML:
<html>
<body>
<div class="test">
<div class="box">
<div class="arrow"></div>
</div>
<a href="#" class="btnStartAni">Animate</a>
</div>
</body>
CSS:
.test { margin: 0; padding: 0;}
.test .box { width: 150px; height: 140px; background-color: red; position: relative; }
.test .box .arrow { width: 50px; height: 50px; background-color: black; position:
absolute; bottom: 0; right: -50px;}
JavaScript:
jQuery(".test a.btnStartAni").on("click", function(e){
e.preventDefault();
jQuery(".box").animate({ width: 400}, 800);
});
the black box is during animation hide! But i dont know why?
can you help me please?
488
jQuery causes the overflow to be hidden when you use .animate, so change your code to
jQuery(".test a.btnStartAni").on("click", function(e){
e.preventDefault();
jQuery(".box").animate({ width: 400}, 800).css('overflow', 'visible');
});
And it should work
JsFiddle: http://jsfiddle.net/2VJe8/1/
Source: jQuery .animate() forces style "overflow:hidden"
154
overflow: hidden gets set on .box when jQuery animates the box. .arrow overflows from .box and so disappears. Consider changing the markup.
39
You can also re-arrange the elements to get the same effect (using float:left and display:inline-block)
http://jsfiddle.net/mkVrL/
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
