jQuery絕對定位的動畫？

Question

我想獲得多邊形動畫與兄弟分區。我認爲這不是動畫，因爲它被絕對定位？有沒有辦法讓它與兄弟姐妹一起滑動？

這裏是一個小提琴：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

我想這是一個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/

Answer 2

此無關與他們一起運動，你的箭頭被定位你的框外當您使用.animate()時，它會在轉換期間隱藏溢出內容。你可以使你的背景顏色減少寬度，並保持你的盒子中的箭頭一起移動（注意你必須使用間距來使它看起來更好，我的是一個簡單的例子來解釋行爲） ：

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

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

FIDDLE