Question

我想制作一个类似菜单的东西，由几个盒子组成，它们会浮到一边并显示它们下面的链接，而用户则将鼠标移到它们上面。这是一个小提琴：FIDDLE

你能告诉我阻止他们移动的原因吗？

$(document).ready(function () {
    $("#kwadrat1").mouseenter(function () {
        $(this).animate({
            left: '-=100px'
        }, slow);
        $("#link1").css("display", "visible");
    });
    $("#kwadrat2").mouseenter(function () {
        $(this).animate({
            top: '-=100px'
        }, slow);
        $("#link2").css("display", "visible");
    });
    $("#kwadrat3").mouseenter(function () {
        $(this).animate({
            bottom: '-=100px'
        }, slow);
        $("#link4").css("display", "visible");
    });
    $("#kwadrat4").mouseenter(function () {
        $(this).animate({
            right: '-=100px'
        }, slow);
        $("#link4").css("display", "visible");
    });
});

Answer 1

如果遇到此类问题，您必须检查浏览器开发工具控制台。

在这种情况下，你得到：

Uncaught ReferenceError: slow is not defined

因此，您必须使用slow而不是"slow"。

$(this).animate({
    top: '-=100px'
}, "slow");
// ^-- As string instead of variable

JSFIDDLE

Answer 2

您正在做的另一个错误是显示没有可见的属性，您应该使用其他类似block的内容。所以：

$("#linkX").css("display", "visible");

会变成：

$("#linkX").css("display", "block");

Demonstration

根据IonicăBizău suggesstion：

$("#linkX").css("display", "block");

可以成为：

$("#linkX").show();

修复动画：

$(document).ready(function () {
    $("#kwadrat1").mouseenter(function () {
        $(this).animate({
            left: '-=100'
        }, "slow");
        $("#link1").show();
    });
    $("#kwadrat2").mouseenter(function () {
        $(this).animate({
            top: '-=100'
        }, "slow");
        $("#link2").show();
    });
    $("#kwadrat3").mouseenter(function () {
        $(this).animate({
            top: '+=100'
        }, "slow");
        $("#link3").show();
    });
    $("#kwadrat4").mouseenter(function () {
        $(this).animate({
            left: '+=100'
        }, "slow");
        $("#link4").show();
    });
});

Demo.

我所做的更改：

将.css("display")转换为.show()
删除right和bottom属性，因为没有任何此类属性left和top与变量符号left: +=一起用于移动正确，反之亦然，top: +=用于移动底部，反之亦然。
将slow更改为"slow"

jQuery - 如何在菜单中为框设置动画？

2 个答案: