jQuery анимировать абсолютное позиционирование?

Question

Я пытаюсь получить многоугольник для анимации с div 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

Моя ошибка думать, что это был 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