CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
Chipe
Chipe

Reputation: 4811

jQuery animate of an absolute positioning?

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>

Upvotes: 0

Views: 121

Answers (2)

Chipe
Chipe

Reputation: 4811

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/

Upvotes: 0

jmore009
jmore009

Reputation: 12931

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

Upvotes: 1

Related Questions