Question

我使用jquery和javascript来创建一些自定义翻转按钮功能，我遇到的问题是变量不会被覆盖但是被添加到。我的代码的基本功能是鼠标悬停链接，我只是希望链接向上滑动并加倍高度，以便显示图形的底部“开启”部分（就像css滑动门翻转）。

然而，我遇到的问题是doubleHeight变量是累积的，因此每次滚动链接时，链接的双倍高度不会每次都重置，它只是将它添加到最后一个值。奇怪的是，这只发生在页面上触发灯箱之后，之前功能正常。这是我的javascript：

var heightVal, doubleHeight;

$('div.flex_rollover_btn p a').bind('mouseover', function() {
    heightVal = $(this).css('height');
    doubleHeight = heightVal.replace("px", "");
    doubleHeight = doubleHeight * 2 + "px";
    $(this).css({height: doubleHeight, top: '-' + heightVal});
});

$('div.flex_rollover_btn p a').bind('mouseout', function() {
    heightVal = $(this).parent().css('height');
    $(this).css({height: heightVal, top: '0'});
});

以下是它所采用的HTML代码：

<div style="position: absolute; top: 322px; left: 13px; width: 139px; height: 79px; z-index: 3;" class="block item_3 flex_rollover_btn">
    <p style="width: 75px; height: 53px;"><a style="width: 75px; height: 53px;" class="new_window" title="Flexible Size Rollover Test 2" href="http://doctype.tv"><img height="106" width="75" alt="Flexible Size Rollover Test 2" src="/cms/arcadiacorp_uk/repository/pages/static/static-0000006614/images/flex_rollover_2.gif"></a></p>
</div>

要查看它的动作go here向右滚动并将鼠标悬停在红色星星的东西上，然后打开一个灯箱（其旁边带有+符号的任何链接）关闭它并将鼠标悬停在红色星形物上再次，你会看到我的意思。

Answer 1

在mouseout处理函数中，您实际上并没有做任何事情。你获得了heightVal（之前加倍了）并将其分配回来。简单的解决方案是在分配之前将值除以2，就像在鼠标悬停功能中将其加倍一样。

最好的方法是使用CSS类完成所有操作。在CSS中，您可以指定所有尺寸，例如高度，然后在JavaScript中，您只需通过添加或删除类来更改高度。

编辑：我在mouseout处理函数中看到你看父母。您确定父元素没有使用子元素调整大小吗？

Answer 2

我知道这不是直接解决你的问题，但不要这样做：

doubleHeight = heightVal.replace("px", "");
doubleHeight = doubleHeight * 2 + "px";

相反，这样做：

doubleHeight = (2 * parseInt(heightVal, 10)) + px;

使用jQuery鼠标悬停时奇怪的高度加倍错误

2 个答案: