JQuery 또는 CSS3으로 플라이 아웃 패널을 만드는 방법은 무엇입니까?

Question

본질적으로 왼쪽 세로 열에 내 링크를 마우스로 가리키고 오른쪽에 패널이 튀어 나오길 원합니다. 달성하고자하는 목표 중 screenshot입니다. 다시 말하지만, JQuery에 관해서는 완전한 멍청한 놈입니다. 그렇다면이 일을하는 데있어 css3 방법이 엄격하게 있다면, 나는 모든 귀입니다.

http://flic.kr/p/cTsG9E

Answer 1

아마 CSS3 전환과 함께 할 수있는 방법이있다. 일부 브라우저에서는 지원하지 않을 수 있습니다.

가장 쉬운 방법은 jQuery를 사용하는 것입니다. 당신의 JS에서 다음

<a id="trigger-link">Hover Over Me</a> 
. . . 
<div id="target" style="display: none">I should not be using inline styles</div> 

는 :

$("#trigger-link").hover(function() { 
    $("#target").show(); 
}, function() { 
    $("#target").hide(); 
}); 

이것은 매우 간단한 예입니다. 그러나 시작하기 좋은 곳이어야합니다.

Answer 2

jQuery 애니메이션으로 크로스 브라우저 애니메이션을 쉽게 볼 수 있습니다. 유래에

http://api.jquery.com/animate/