텍스트 막대 너비에 애니메이션 적용

Question

내 웹 사이트 용 탐색 모음을 만들고 슬라이드 바깥쪽에있는 텍스트가 어떤 텍스트 너비로 움직 이길 원합니다. 한 줄로 모든 것을 원합니다. 여기에 jsfiddle 내 jQuery 코드는 지금까지

http://jsfiddle.net/2UEpd/26/ $ (문서) .ready (함수() {

$("#test").hide(); 
$(".title").hide(); 



$(".home").click(function(){ 
    $("#test").slideToggle("slow"); 
}); 

$(".slideWrapper").hover(

function() {  
    $(this).children(".slideNav:eq(0)").stop().animate({ 
     width: "112px", 
     height: "30px" 
    }); 

    $(this).children(".slideBox:eq(0)").stop().animate({ 
     left: "112px", 
     opacity: "1" 
    }); 

    $(this).find(".title").show(); 


}, function() { 
    var $box = $(this).children(".slideBox:eq(0)"); 

    $(this).children(".slideNav:eq(0)").stop().animate({ 
     width: "0px", 
     height: "30px" 

    }); 

    $(this).children(".slideBox:eq(0)").stop().animate({ 
     left: "0px", 
     opacity: ".7" 
    }); 

    $(this).find(".title").hide(); 

}); 

});

나는 지금 당분간 노력해 왔으며, 어떤 도움을 주시면 감사하겠습니다.

Answer 1

Display:table propertie 또는 inline-block이 도움이됩니다.

예를 들어 폭 text-indent 및 letter-spacing을 재생하는 것이 좋습니다.

여기서는 CSS를 통한 아이디어의 표본으로 표 레이아웃 속성을 사용하므로 컨테이너가 내용 텍스트에 사용되는 너비에 맞습니다. basicly http://codepen.io/gc-nomade/pen/kaEoe

: 데모 prpose에 대한 초점과 포인터 이벤트 : 메뉴에서

.slideNav { 
    height: 30px; 
    width: 0px; 
    padding:0 15px;/* gives it 30px width minimal */ 
    line-height:30px; 
    display:table;/* shrink /expand to size needed by content */ 
    position: relative; 
    white-space:nowrap; 
    text-indent:-3em; 
    letter-spacing:-1em; 
    transition:1s; linear ; 
    opacity: .7; 
    color: transparent; 
} 
.slideNav:hover {/* here set back to regular setting to layout text properly */ 
    opacity:1; 
    text-indent:0em; 
    letter-spacing:1px; 
    color: white; 
} 

토글 클릭 열기/닫기 기능을 통해 구동된다. javaScript는 더 나은/좋은 연습을 위해 이것을 처리해야합니다.