JQuery 문제가있는 바닥 글

Question

다음 html/jquery를 사용하여 마우스 오버시 확장되는 바닥 글을 얻으려고합니다 (아래 코드 참조). 대신에 바닥 글은 같은 장소에 머무르며 전혀 확장되지 않습니다. (하단의 CSS).

HTML : (jQuery로)

<div id="footer"> 
    <div id="v_line"></div> 
    <div class="column"> 
     <ul id="lpro"> <a href="https://www.google.com/" target="_blank"><div class="googleme"> 
       <img src="google.png" alt="google_filler"></div></a> 

     </ul> 
    </div> 
    <div class="column"> 
     <ul id="spro"> <a href="https://www.yahoo.com" target="_blank"><div class="yahoo"><img 
       src="yahoo.png" alt="yahoo_filler"></div></a> 

     </ul> 
    </div> 
</div> 

자바 스크립트 :

function openmenu(e) { 
    if (e) e.stopPropagation(); 
    $('#footer').animate({ 
     height: "75px" 
    }, 400, null, function() { 
     $("#footer").off("mouseenter"); 
     $('#footer').on('mouseleave', closemenu); 
    }); 
} 

function closemenu(e) { 
    if (e) e.stopPropagation(); 
    $('#footer').animate({ 
     height: "33px" 
    }, e ? 400 : 0, null, function() { 
     $("#footer").off("mouseleave"); 
     $('#footer').on('mouseenter', openmenu); 
    }); 
} 

$(function() { 
    $('#footer').on('mouseenter', openmenu); 
    closemenu(); 
    $("body").css("overflow", "hidden"); 
}); 

바닥 글 CSS :

#footer { 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    background-color:#0F0F0F; 
    height:150px; 
    opacity:0.8; 
} 

Answer 1

SCRI 태평양 표준시는 나를 위해 작동합니다. 내가 수정 한 것은 (사전 편집 버전에서) jquery 링크뿐이었습니다.

사이트가 라이브 서버에있는 경우, 최신 버전을로드하고 있는지 확인하기 위해

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

에

<script src="jquery.js"> </script> 

을 변경해보십시오.

Answer 2

이 작업을 수행하는 데 Javascript가 필요하지 않습니다. CSS를보십시오 :

#footer{ 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    background-color:#0F0F0F; 
    height:33px; 
    opacity:0.8; 
    transition: height 400ms; 
} 

#footer:hover { 
    height: 150px; 
} 

당신은 너무 좋아,하지만 성능 translate 같은 애니메이션을 잘 할 것 :

#footer{ 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    background-color:#0F0F0F; 
    height:150px; 
    opacity:0.8; 
    transform: translateY(120px); 
    transition: transform 400ms; 
} 

#footer:hover { 
    transform: translateY(0px); 
}