뒤에서부터 텍스트를 내 보냅니다.

Question

먼저 jQuery를 배워야한다는 것을 알기 시작했고, 이번 주말에는 Treehouse jQuery 비디오를 강타 할 것입니다.

난 당신이 내가 만든 한 바이올린 한 번 봐 걸릴 경우, 탐색 메뉴하시기 바랍니다 만들려고 해요 효과와 약간의 도움 싶습니다 http://jsfiddle.net/number8pie/kvMkF/4/

을 당신은 거기에 볼 수 있듯이 네비게이션 링크 목록은 링크에 해당하는 텍스트입니다. 제가 원했던 것은 처음에는 화면 판독기를 제외한 모든 사용자가 해당 텍스트를 볼 수 없도록하고, 사용자 마우스 오버가 링크 일 때 해당 텍스트가 가장 왼쪽 목록 항목 뒤에서 가시성으로 슬라이드하고 " NAVIGATE "가 사라집니다. 모든 텍스트가 처음부터 어디서 왔는지, 그리고 "네비 게이트 (NAVIGATE)"텍스트가있는 동일한 장소로 슬라이드하고 싶습니다.

저는 CSS (CSS만으로 가능하지는 않습니다), jQuery 또는 JavaScript라는 솔루션에 열려 있습니다.

미리 도움 주셔서 감사 드리며 최대한 빨리 jQuery를 배우기 시작하겠습니다.

여기에 코드입니다 :

HTML :

<nav class="main-nav"> 
    <p class="nav-hvr-init">Navigate</p> 
    <ul> <!-- no closing tag on <li> so that the whitespace between elements is removed--> 
     <li id="about-us"> 
      <a class="nav-link" href="#"></a> 
      <span class="nav-text">about us</span> 
     <li id="products"> 
      <a class="nav-link" href="#"></a> 
      <span class="nav-text">products</span> 
     <li id="the-team"> 
      <a class="nav-link" href="#"></a> 
      <span class="nav-text">the team</span> 
     <li id="environment"> 
      <a class="nav-link" href="#"></a> 
      <span class="nav-text">environment</span> 
     <li id="contact"> 
      <a class="nav-link" href="#"></a> 
      <span class="nav-text">contact</span> 
    </ul> 
</nav> 

CSS :

#nav-row { 
    background-color: #CCFFCC; 
} 

#nav-col { 
    height: 56px; 
    padding-top: 0; 
    background-color: #336600; 
} 

.main-nav { 
    height: 56px; 
    margin: 0 auto; 
    background-color: #336600; 
    position: relative; 
} 

.main-nav ul li { 
    height: 56px; 
    width: 56px; 
    margin: 0; 
    font-size: 21px; 
    display: inline-block; 
    text-transform: uppercase; 
} 

#about-us { 
    background: #66CC66 url('http://s10.postimg.org/xqx00ofzp/about_us.png') no-repeat center; 
} 

#about-us:hover { 
    background: #66CC66 url('http://s10.postimg.org/9borzmh2t/about_us_hover.png') no-repeat center; 
    -webkit-transition: all 350ms ease-in-out; 
    -moz-transition: all 350ms ease-in-out; 
    -o-transition: all 350ms ease-in-out; 
    transition: all 350ms ease-in-out; 
} 

#about-us:active { 
    background: #66CC66 url('http://s10.postimg.org/ekjsxhzhx/about_us_active.png') no-repeat center; 
    -webkit-transition: all 50ms ease-in-out; 
    -moz-transition: all 50ms ease-in-out; 
    -o-transition: all 50ms ease-in-out; 
    transition: all 50ms ease-in-out; 
} 

#products { 
    background: #33CC33 url('http://s10.postimg.org/defsypb79/products.png') no-repeat center; 
} 

#products:hover { 
    background: #33CC33 url('http://s10.postimg.org/y2j1r6lth/products_hover.png') no-repeat center; 
    -webkit-transition: all 350ms ease-in-out; 
    -moz-transition: all 350ms ease-in-out; 
    -o-transition: all 350ms ease-in-out; 
    transition: all 350ms ease-in-out; 
} 

#products:active { 
    background: #33CC33 url('http://s10.postimg.org/6p99iopv9/products_active.png') no-repeat center; 
    -webkit-transition: all 50ms ease-in-out; 
    -moz-transition: all 50ms ease-in-out; 
    -o-transition: all 50ms ease-in-out; 
    transition: all 50ms ease-in-out; 
} 

#the-team { 
    background: #339900 url('http://s10.postimg.org/4sh4ruol1/the_team.png') no-repeat center; 
} 

#the-team:hover { 
    background: #339900 url('http://s10.postimg.org/buf2e1s6t/the_team_hover.png') no-repeat center; 
    -webkit-transition: all 350ms ease-in-out; 
    -moz-transition: all 350ms ease-in-out; 
    -o-transition: all 350ms ease-in-out; 
    transition: all 350ms ease-in-out; 
} 

#the-team:active { 
    background: #339900 url('http://s10.postimg.org/wd9yj4645/the_team_active.png') no-repeat center; 
    -webkit-transition: all 50ms ease-in-out; 
    -moz-transition: all 50ms ease-in-out; 
    -o-transition: all 50ms ease-in-out; 
    transition: all 50ms ease-in-out; 
} 

#environment { 
    background: #006600 url('http://s10.postimg.org/gb7fcq6et/environment.png') no-repeat center; 
} 

#environment:hover { 
    background: #006600 url('http://s10.postimg.org/n47s8zx85/environment_hover.png') no-repeat center; 
    -webkit-transition: all 350ms ease-in-out; 
    -moz-transition: all 350ms ease-in-out; 
    -o-transition: all 350ms ease-in-out; 
    transition: all 350ms ease-in-out; 
} 

#environment:active { 
    background: #006600 url('http://s10.postimg.org/6y6u8m2np/environment_active.png') no-repeat center; 
    -webkit-transition: all 50ms ease-in-out; 
    -moz-transition: all 50ms ease-in-out; 
    -o-transition: all 50ms ease-in-out; 
    transition: all 50ms ease-in-out; 
} 

#contact { 
    background: #003300 url('http://s10.postimg.org/9pq3z816d/contact.png') no-repeat center; 
} 

#contact:hover { 
    background: #003300 url('http://s10.postimg.org/udordymet/contact_hover.png') no-repeat center; 
    -webkit-transition: all 350ms ease-in-out; 
    -moz-transition: all 350ms ease-in-out; 
    -o-transition: all 350ms ease-in-out; 
    transition: all 350ms ease-in-out; 
} 

#contact:active { 
    background: #003300 url('http://s10.postimg.org/4scje3z79/contact_active.png') no-repeat center; 
    -webkit-transition: all 50ms ease-in-out; 
    -moz-transition: all 50ms ease-in-out; 
    -o-transition: all 50ms ease-in-out; 
    transition: all 50ms ease-in-out; 
} 

.main-nav > ul { 
    height: 56px; 
    line-height: 100%; 
    margin: 0; 
    position: relative; 
    float:right; 
    padding: 0; 
} 

li > svg { 
    margin: 9% 0 0 11%; 
} 

li > a { 
    display: block; 
    padding: 0; 
    margin: 0; 
} 

.nav-link { 
    margin: 0; 
    height: 56px; 
} 

.nav-text { 
    color: #FFFFFF; 
    font-family: 'Arial Black'; 
    font-size: 21px; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
} 

.nav-hvr-init { 
    color: #FFFFFF; 
    font-family: 'Arial Black'; 
    font-size: 21px; 
    text-transform: uppercase; 
    line-height: 100%; 
    margin-right: 4px; 
    margin-bottom: 0; 
    position: absolute; 
    right: 280px; 
    bottom: 0px; 
    opacity: 0.2; 
} 

.txt-arrows { 
    font-family: 'Arrows'; 
    font-size: 18px; 
    text-transform: none; 
    margin-bottom: 3px; 
    margin-left: 4px; 
} 

이

Answer 1

어떻게 .nav-text에? 이게 니가 원하는거야?

또한 (부트 스트랩의) sr-only 클래스를 추가했습니다.

$(".nav-link").hover(
    function() { 
    var text = $(this).siblings("span").html(); 
      $(".nav-hvr-init") 
      .stop() 
      .animate({right: '0px'},200,function() { 
       $(this).html(text).animate({right:'280px'},200); 
      }); 
    }, function() { 
     $(".nav-hvr-init") 
      .stop() 
      .animate({right: '0px'},200,function() { 
       $(this).html('Navigate').animate({right:'280px'},200); 
      }); 
    } 
); 

Answer 2

$(".main-nav li").hover(function(){ 
    $(".nav-hvr-init").fadeOut(); 
    $(this).find('.nav-text').show().animate({left : '150px'}); 
    }, function(){ 
    $(".nav-hvr-init").fadeIn(); 
    $(this).find('.nav-text').animate({left : '-100%'}); 
}); 

here is a fiddle

Answer 3

빠르고 쉬운.

jQuery를 :

$(".nav-link").hover(
    function() { 
    var ntext = $(this).siblings("span").html(); 
    $(".nav-hvr-init").html(ntext); 
    }, function() { 
    $(".nav-hvr-init").html("Navigate"); 
    } 
); 

또한 추가 display: none; 그것에 대해

jsFiddle