jquery - 带有 JQuery 问题的页脚

Question

我正在使用以下 html/jquery 来尝试获取在鼠标悬停时展开的页脚(请参见下面的代码)。相反，页脚停留在同一个地方，根本不会展开。 (底部的 CSS)。

HTML:

<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>

JavaScript(带有 JQuery):

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

您绝对不需要 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);
}