0

我有这个标签滑块，当你悬停标签时它会移动一点。我希望只有当滑块没有滑出时才会发生这种情况。当它出来时，它不应该悬停。 请参阅此处的工作示例。

滑块滑出时会“打开”类，所以我尝试添加以下代码：

if (!$("#contactContainer").hasClass("open")) {
    $("#contactContainer").hover(function() {
        $(this).stop(true, true).animate({
        "right": "+=30px"
    }, 300); }, function() {
        $(this).stop(true, true).animate({
        "right": "-=30px"
    }, 300); });
}

但是，它似乎没有任何区别。打开的滑块在悬停时仍会移动。我该如何解决？

4

4 回答 4

3

您所做的只是在容器未打开时添加悬停功能 - 因为这发生在加载时（当容器未打开时）悬停功能始终存在。

有几种方法可以解决这个问题，最简单的方法是检查容器是否打开，试试这个：

$("#contactContainer").hover(
    function() {
        if (!$(this).hasClass("open")) {
            $(this).stop(true, true).animate({"right": "+=45px"}, 300);
        }
    }, function() {
        if (!$(this).hasClass("open")) {
            $(this).stop(true, true).animate({"right": "-=45px"}, 300);
        }
    }
);

或者实现一个封闭类并直接在该类上使用 CSS 动画来进行移动。或者添加/删除悬停功能作为打开/关闭功能的一部分。上述解决方案最简单，但根据您想要的确切功能可能会有一些问题。

于 2013-10-09T08:33:10.587 回答
2

使用 SpaceDog 的示例，滑块关闭但继续在屏幕外显示动画。这是因为 'open' 类被立即删除，并且当您的鼠标悬停在容器上时，会触发悬停行为（将选项卡从屏幕左侧移动 45 像素，并防止用户再次单击它）。

如果您还检查 ':animated' 属性，则可以防止触发悬停行为，因此将选项卡保留在屏幕上：

$("#contactContainer").hover(
    function() {
    if (!$(this).hasClass("open") && !$(this).is(":animated")) {
        $(this).stop(true, true).animate({"right": "+=45px"}, 300);
    }
    }, function() {
        if (!$(this).hasClass("open") && !$(this).is(":animated")) {
            $(this).stop(true, true).animate({"right": "-=45px"}, 300);
        }
    }
);
于 2013-10-09T08:50:01.677 回答
0

您必须将该 if 语句移动到悬停函数中，并且仅当它没有打开类时才进行动画处理。

您的 if 检查当前仅在加载页面时检查容器。

于 2013-10-09T08:34:29.687 回答
0

您也可以使用jQuery 的 on-method。这将绑定到文档的 mouseenter 和 mouseleave 元素，然后检查它们是否从与选择器匹配的元素中冒出。

$(document).on("mouseenter", "#contactContainer:not(.open)", function() {
    $(this).stop(true, true).animate({"right": "+=45px"}, 300);
}).on("mouseleave", "#contactContainer:not(.open)", function() {
    $(this).stop(true, true).animate({"right": "-=45px"}, 300);
});
于 2013-10-09T08:58:28.060 回答