Jquery Span仅在动画结束后从外部div中退出

我使用jQuery实现了动画效果：

UPD：这只适用于Chrome

此动画效果正常工作，但绿色范围仅在动画结束后才从外部红色DIV中消失。为什么？我想在动画开始时，绿色的跨度立即超过红色的DIV。我的CSS不是很强。我玩了

z-index

和

position

风格，但没有达到预期效果

HTML:

jQuery代码：

---

我怎样才能解决我的问题？提前谢谢

jQuery在设置动画时添加隐藏溢出。找到了两个解决方案

第一种方法是使用一个！重要（不是一个好的做法）

jsfiddle.net/rxCDU/2

第二种方法是使用

步骤

并覆盖溢出：

$(this).animate({width: "150", height: "125", right: "+=200", "font-size": "150px" }, {duration : 1200, step : function(){
         $(this).css('overflow', 'visible')
}})

.ext_div {
    -webkit-transform: rotate(-50deg);
}

div.ext_div div {
    background-color: red;
    position: relative;
    margin-top: -400px;
    padding-left: 80px;
    width: 200px;
    height: 250px;
    font-size: 350px;
}

div.ext_div div span {
    background-color: green;
    width: 100px;
    float: left;

    -webkit-transform: skewY(50deg);
    -moz-transform: skewY(50deg);
    -o-transform: skewY(50deg);
    -ms-transform: skewY(50deg);
    transform: skewY(50deg);
}  

$(document).ready(function() {

     $(".int_div").queue(function () {
        $(this).animate({width: "150", height: "125", right: "+=200", "font-size": "150px" }, 1200)
               .queue(function () {
                    $(this).addClass("myclass");}).dequeue();
     });    

 return false;

});

div.ext_div div {
    overflow : visible!important;
    background-color: red;
    position: relative;
    margin-top: -400px;
    padding-left: 80px;
    width: 200px;
    height: 250px;
    font-size: 350px;
}

$(this).animate({width: "150", height: "125", right: "+=200", "font-size": "150px" }, {duration : 1200, step : function(){
         $(this).css('overflow', 'visible')
}})