Home/ Questions/Q 9001945
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T00:30:15+00:00

do you know why i cant animate a absolute-positioning div with jQuery? show please

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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"

    • 0