你知道为什么我不能使用jQuery动画一个绝对定位的div?
显示请在这里(这是我的例子):
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); });
黑盒子在动画隐藏!但我不知道为什么?
你能帮我吗?
解决方法
当使用.animate时,jQuery会导致溢出被隐藏,所以将代码更改为
jQuery(".test a.btnStartAni").on("click",function(e){ e.preventDefault(); jQuery(".Box").animate({ width: 400},800).css('overflow','visible'); });
它应该工作
JsFiddle:http://jsfiddle.net/2VJe8/1/