Question

我使用jQuery做了动画效果：

UPD ：这仅适用于Chrome！

此动画效果正常，但绿色SPAN仅在动画结束后从外部红色DIV 中退出。为什么？我想在动画开始时立即将绿色SPAN放在红色DIV上。我在CSS方面不是很强。我使用z-index和position样式，但它没有带来预期的结果。

HTML ：

<div class="ext_div">
   <div class="int_div"><span>A</span></div>
</div>

CSS ：

.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);
}

jQuery-CODE ：

$(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;

});

如何解决我的问题？提前谢谢！

Answer 1

jQuery在动画时添加溢出隐藏。找到2个解决方案。

首先是使用！important（不是一个好习惯）添加div可见的溢出。

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;
}

jsfiddle.net/rxCDU/2

第二个是使用step并覆盖溢出：

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

http://jsfiddle.net/rxCDU/4/

只有在动画结束后，Span才会从外部div中退出

1 个答案: