jquery로 애니메이션 텍스트 전환

이 페이지의 오른쪽에 이와 비슷한 것을 얻으려고합니다. http://playground.deaxon.com/css/text-switch/jquery로 애니메이션 텍스트 전환

내가 지금까지 가지고있는 것은 어디에도 없습니다. 그 멋진 슬라이드 효과가 있습니다. 누군가 위의 사이트에서 가지고있는 것을 얻을 수 있도록 도와 줄 수 있습니까?

무엇 내가 지금까지 가지고하는 것은 : http://jsfiddle.net/2MEka/

jQuery(document).ready(function(){ 
    jQuery('.up-down').mouseover(function(){ 
     jQuery('.default').stop().animate({ 
      height: 0  
     }, 60);       
    }).mouseout(function(){ 
     jQuery('.default').stop().animate({ 
      height: 60 
     }, 60)  
    }) 

});

출처

2013-07-09 Athapali

당신이 링크 된 페이지는, 당신이 ... – Tallmaris

CSS로 표현하면 (, CSS 전환 사용) 할 수 있습니다.

(당신은 또한 고려 패딩 너비/높이에 추가됩니다 있다는 사실을해야하므로 컨테이너는 더 큰 할 필요) http://jsfiddle.net/9WwQ9/16/

에서

.up-down { 
    overflow:hidden; 
    height:70px; 
    width:130px;  
    font-weight: bold; 
} 
.up-down > div { 
    width:120px; 
    height:60px;  
    padding:5px; 
    color:#fff; 
    transition:margin 0.3s; 
} 
.default { 
    background-color:#0b61a4; 
} 
.onhover { 
    background-color:#00aeef; 
    font-size: 14px; 
} 
.up-down:hover .default{ 
    margin-top:-70px; 

}

데모

에이있는 경우 애니메이션에 jQuery를 사용하려면 margin-top에 애니메이션을 적용하여 b Edorka 문제를 언급 한 바와 같이 동시에 OTH 이동 ..

.animate({ 
      marginTop: -70  
     },100);

http://jsfiddle.net/9WwQ9/23/

출처

2013-07-09 16:00:03

내가 사랑하는 자신의 코드를 잡고 당신을 위해 작동하는지 볼 수있는 효과를 얻을에만 HTML과 CSS를 사용 두 번째 해결책. 나는 IE8로 제한되어 있으므로 어떻게 든 css3 전환 효과를 모방해야했습니다. 당신의 도움을 주셔서 감사합니다! – Athapali

는 문제가 패딩 것 같다

이제

.up-down { 
    overflow:hidden; 
    height:60px; 
    width:220px;  
    font-weight: bold; 
} 
.slide { 
    width:220px; 
    height:60px; 
} 
.default { 
    background-color:#0b61a4; 
    color:#fff; 
} 
.onhover { 
    background-color:#00aeef; 
    height: 60px; 
    color:#fff; font-size: 14px; 
}

당신이를 추가해야 고려해야 할 여백이있는 텍스트의 범위.

출처

2013-07-09 15:52:03 Edorka

는 default 사업부의 패딩입니다. 그러나 html을 변경하지 않아도이 작업을 수행 할 수 있습니다. 애니메이션에 패딩 변경 사항을 추가 했으므로 내부 스팬이 필요하지 않습니다. 패딩 애니메이션을 사용하지 않으려면 마우스를 올리면 변경할 수 있습니다. 그러면 더 유연한 모양을 보일 것입니다. 애니메이션 중에 텍스트가 약간 움직입니다.

모든 변경된 코드는 여기에 있습니다 :

http://jsfiddle.net/9WwQ9/15/

출처

2013-07-09 16:00:09 Don

jquery로 애니메이션 텍스트 전환

답변

관련 문제