jQuery animate of an absolute positioning?

Question

I am trying to get the polygon to animate with the sibling div. I am thinking it is not animating due to it being absolute positioned? Is there a way to get it to slide along with the sibling div?

Here is a fiddle: 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

this has nothing to do with them moving together, your arrow is positioned outside of your box and when you use .animate() it hides the overflow content during the transition. You can make your .one-inner background color less width and keep the arrow inside your box to have it move together ( NOTE you'll have to play with the spacing to make it look better, mine is a simple example to explain the behavior):

.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

Answer 2

My mistake of thinking it was a position:absolute issue. The issue is the overflow:hidden , so here is what I fount out, adding .css('overflow','visible'); to the end of the animation:

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

Here is a fiddle: http://jsfiddle.net/Lzxmk5jp/7/