팝업 메뉴에 jquery 코드 적용

Question

팝업 메뉴를 만들려고하므로 사용자가 한 메뉴를 가리키면 튀어 나오고 아이콘이 색상으로 바뀝니다.

일부 코드가 있습니다.

$('.box').hover(function() { 
if(!$(this).data('open')){ 
    $(this).animate({ top: '-30px' }, 'slow', function() {}); 
} else { 
    $('#.box').animate({ top: '50px' }, 'slow', function() {}); 
} 

}); 여기

DEMO : http://jsfiddle.net/6jLFP/4/

당신이 나와 함께 당신의 편집의 jsfiddle을 공유 할 수 있습니까? 나는 정말로 붙어있다. 또한 위로 움직이거나 튀어 나오면서 상태 (유색 아이콘)를 움직여야합니다.

Answer 1

답변에 거의 다 왔습니다.

• 하나는 당신의 .box

  .box { 
      position:relative; 
  } 
  

• 두 변화에 함수 position:relative를 추가 : 나는 몇 가지 변경 할

  $('.box').hover(function() { 
      $(this).animate({ top: '-30px' }, 'slow'); 
  }, function() { 
      $(this).animate({ top: '0px' }, 'slow'); 
  }); 
  

확인이 데모 http://jsfiddle.net/6jLFP/21/

당신은 CSS 너무 CSS 파일이 추가로이 작업을 수행 할 수 있습니다

.box {transition:all 1s ease-in;} 
.box:hover {top:-50px;} 

보기 데모 http://jsfiddle.net/6jLFP/27/. 유일한 문제는 호환성에 관한 것입니다.