부모 div, jquery, greensock, css의 가운데에 동적 너비 내용이있는 자식 요소에 애니메이션을 적용하는 방법

Question

범위의 너비와 관계없이 자식 범위를 부모 컨테이너의 가운데로 애니메이션하려고합니다. 다음은

내 코드입니다 : greensock와

<div class="btn btn--large "> 
    <a href=""> 
     <span> 
     NEXT CASE STUDY 
     </span> 
    </a> 
</div> 

CSS

.btn { 
    display: inline-block; 
    text-transform: uppercase; 
    position: relative; 
    letter-spacing: 1px; 
    font-size: 13px; 
    border: 2px solid #0c315d; 
} 

.btn--large a { 
    padding: 16px 60px 16px 16px; 
    display: block; 
} 

.btn span { 
    font-weight: 700; 
    position: relative; 
} 

jQuery를

HTML

여기

jQuery(document).ready(function($) { 
    // vars 
    $btnSpan = $('.btn a span'); 

    // animate button text 
    $(".btn a").bind("mouseenter",function(){ 
     $(this).find($btnSpan).stop(true, false).animate({left: 50% -$btnSpan.width()/1.5, ease: "Bounce",}, 600); 

    }).bind("mouseleave",function(){ 
     $(this).find($btnSpan).stop(true, false).animate({left:"0%", ease: "Bounce"}, 200); 
    }); 
}(jQuery)); 

0은 부모가 폭 내가 계산하여

jsfiddle

Answer 1

당신이 그것을 중심으로 수를 만든 jsfiddle 링크 및 패딩입니다 :

var paddingLeft = parseInt($btnParent.css('paddingLeft')); 
    var moveLeft = $btnParent.outerWidth()/2-$btnSpan.width()/2-paddingLeft; 
    $(this).find($btnSpan).stop(true, false).animate({ 
     left: moveLeft, ease: "Bounce"}, 600); 

볼 https://jsfiddle.net/nhnyhv1j/