小贝子编程

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



我使用jQuery制作动画效果:

http://jsfiddle.net/rxCDU/

UPD:这只适用于Chrome!

这个动画效果正常工作，除了绿色的SPAN只有在动画结束后才会从外部的红色DIV 中出来。为什么?我想让绿色的SPAN在红色的DIV上立即开始动画。我不太擅长CSS。我尝试了z-index和position风格，但没有带来理想的结果。

: 

<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代码: 

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

我该如何解决我的问题?提前感谢!

jQuery添加动画时隐藏溢出。找到了两个解

第一个方法是在div中添加一个!important(不是一个好的做法)。

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/

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium