[ 프론트엔드 / css, jquery ] 버튼 애니메이션

프로젝트를 진행하면서  버튼에 마우스를 올리면,

최상단에 있는 버튼이 오른쪽 → 왼쪽으로 이동하면서 아래에 있는 버튼이 보이도록 구현해야 했습니다.

 

무슨 말인지 잘 이해가 안 가시죠? 아래 동영상으로 확인해주세요ㅎㅎ :)

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

1. 시도했던 방법

처음에 저는 아래와 같이 스타일을 주었습니다.

 

a. 회색 버튼 위에 노란색 버튼을 position: absolute를 주어 회색 버튼 위에 배치합니다.

b. 노란색 버튼에 마우스가 hover하거나, focus가 가면 노란색 버튼의 left 값을 -101% 를 주어 왼쪽으로 이동하도록 합니다
자연스럽게 이동되도록 transition 효과도 주었습니다:)

 

이렇게 했더니 노란색 버튼이 왼쪽으로 이동하면서 마우스가 노란색 버튼에 hover 되지 않고, 회색 버튼에 hover 되어 이상하게 스타일이 적용되었습니다.

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

animation을 주어 해결해보려 했으나,

노란색 버튼에 이벤트를 주는 것이라 당연하게도 위와 같은 문제가 그대로 발생하였습니다.

 

 

2. 해결한 방법

그래서 저는 아래와 같은 방법으로 문제를 해결 하였습니다.

 

a. 3개의 버튼을 position: absolute를 주어 나란히 위에 배치합니다.
   [ 투명한 버튼 - 노란색 버튼 - 회색 버튼 ] * 왼쪽부터 제일 상단에 위치한 버튼입니다.

b. 노란색 버튼이 아닌, 투명한 버튼에 hover와 focus 가 발생하면 노란색 버튼이 이동하도록 jquery를 통해 구현하였습니다.

   
    <div class="btn_wrap">
        <a href="#" class="btn btn1">button</a> <!-- 회색 버튼 -->
        <a href="#" class="btn btn2">button</a> <!-- 노란색 버튼 -->
        <a href="#" class="btn btn3"></a> <!-- 투명 버튼 -->
    </div>
 
    <script>
        $(document).ready(function(){
            $('.btn3').on('mouseover focus', function(){
                $('.btn2').css({'left': '-101%'});
            });
 
            $('.btn3').on('mouseleave blur', function(){
                $('.btn2').css({'left': 0});
            });
        });
    </script>

 

 

3. 마치며

좀 더 좋은 방법이 있는지 다시 생각해보고 업데이트하도록 하겠습니다:)

다음 글에는 ajax를 활용하여 웹 페이지의 일부분을 갱신했던 방법을 공유하겠습니다.

 

 

 

 

 

 

 

블로그 구독자 문의 주소 : info@weirdsector.co.kr

그로스 해킹 파트너, LABBIT 바로가기

LABBIT을 운영하는 Team 위어드섹터 만나러 가기