jQuery動畫的絕對定位？

Question

我正在嘗試使多邊形與同級div動畫。 我認為由於處於絕對位置而沒有進行動畫處理？ 有沒有辦法讓它與同胞div一起滑動？

這是一個小提琴： http : //jsfiddle.net/Lzxmk5jp/2/

jQuery的：

$('.one').on('click',function(){

    var width = $('.one').width(),
        parentWidth = $('.one').offsetParent().width(),
        percent = 100*width/parentWidth;

    if(percent < '34'){
        $('.one').animate({
            width:'66%'
        }, 1000),
        $('.one .svg-right-arrow').animate({
            left:'100%'
        }, 1000)
    }
     if(percent > '34'){
        $('.one').animate({
            width:'34%'
        }, 1000),
        $('.one .svg-right-arrow').animate({
            left:'100%'
        }, 1000)
    }
});

HTML：

<div class="cont">
    <div class="one">
        <div class="one-inner"></div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-right-arrow" viewBox="0 0 20 152" preserveAspectRatio="xMinYMid meet">
            <polygon points="0,0 0,152 20,76"></polygon>
        </svg>
    </div>
</div>

Answer 1

這與它們一起移動無關，您的箭頭位於框的外部，當您使用.animate()它會在過渡期間隱藏溢出內容。 您可以使.one-inner背景色的寬度.one-inner並保持框內的箭頭使之一起移動（ 注意，您必須使用空格來使它看起來更好，我的是一個簡單的示例來解釋這種行為）：

.one-inner{
   background-color:#ed7581;
   width:75%;
   height:370px;
}

.one .svg-right-arrow{
   position: absolute;
   left: 74%;
   top:0;
   z-index: 10;
   height:100%;
}

小提琴

Answer 2

我認為這是一個position:absolute錯誤position:absolute問題。 問題是overflow:hidden ，所以這是我發現的內容，添加了.css('overflow','visible'); 到動畫的結尾：

jQuery的：

$('.one').on('click',function(){

     var width = $('.one').width(),
        parentWidth = $('.one').offsetParent().width(),
        percent = 100*width/parentWidth;

     if(percent < '34'){
        $('.one').animate({
            width:'66%'
        }, 1000).css('overflow','visible');
     }
     if(percent > '34'){
        $('.one').animate({
            width:'34%'
        }, 1000).css('overflow','visible');
    }
});

這是一個小提琴： http : //jsfiddle.net/Lzxmk5jp/7/