Question

我正在使用以下html / jquery尝试获取一个在moused-over时扩展的页脚（请参阅下面的代码）。相反，页脚停留在同一个地方，根本不会扩展。（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);
}

Answer 2

该脚本适合我。我改变的唯一一件事（来自你的编辑前版本）是jquery链接。

如果该网站位于实时服务器上，请尝试更改

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

到

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

以确保您加载的是最新版本。

有JQuery问题的页脚

2 个答案: