1

我有一个主导航按钮，在悬停时略微向下移动，然后在悬停时再次返回。单击此按钮会释放一个包含大量 html 的下拉 div，再次单击时，显然该框会返回。然而，页面上的其他带有下拉菜单的按钮需要相互避开，因此每个按钮也会关闭所有其他下拉框。现在我用切换来做，如果你用另一个按钮关闭框，你必须点击两次才能在主按钮上再次下拉下拉菜单。

切换是有效的，但是使用 if 语句来切换样式 jquery 动画的有效方法是什么？因此，如果向下动画，则单击单击，向上动画，否则向下动画。我基本上不知道如何在 if 部分里面写。我见过类似 if(:animated) 的例子，但那是为了判断是否有任何一般动画。我有很多实例我想应用它，所以我需要具体如下：

if(:animation).top = 150{ (div).animate(top = 0)} else {(div).animate(top = 150)}

另外，当您翻转并且顶部按钮向下移动一点时，当下拉菜单向下时我将如何保持向下并在下拉菜单重新向上时重新向上？

这是一个jsfiddle，所以你可以更容易地看到我在说什么。它并不完美，但我的主页看起来很相似，如果我在任何部分感到困惑，请告诉我，我会编辑它！

http://jsfiddle.net/9DN52/1/

4

1 回答 1

1

在我看来，您的代码足够有效，因此您需要做的只是添加一个类以查看它是否被点击而不是停止悬停的动作。

jQuery：

$("#down").hover(
    function() {
        $(this).stop().animate({top:0},200);
    },
    function() {
        // this will alert the situation for you to understand
        alert($(this).hasClass("isDown"));
        // if its clicked than do not move!
        if ($(this).hasClass("isDown") == false) {
            $(this).stop().animate({top:-5},220);
        }
    }
);

$("#down").click(
    function() {
        $("#DropUp").stop().animate({bottom:-250},220);
        // Add a class to see if its clicked
        $(this).toggleClass("isDown");
    }
);

在你的小提琴周围工作：http: //jsfiddle.net/9DN52/14/

编辑：

我还解决了几个错误，修复了一些代码，添加了描述，我认为您真正想要做的是：

jQuery：

// Actually you can do this with css transition
// Remove these descriptions for a cleaner looking code
$("#down").hover(
    function() { $(this).stop().animate({top:0},200); },
    function() {
        // if its clicked than do not move!
        if ($(this).hasClass("isDown") == false) {
            $(this).stop().animate({top:-5},220);
        }
    }
);
// Instead of toggle simple click action is enough
$("#down").click( function() {
    // Thanks to class selector now we know
    // if its clicked or down, so we know what to do..
    if ($("#down").hasClass("isDown") == false) {
        $("#DropDown").stop().animate({top:0},250);
        // if footer is up already this will hide it
        $("#DropUp").stop().animate({bottom:-250},220);
        $("#up").removeClass("isUp");
    } else {
        $("#DropDown").stop().animate({top:-250},220);
    }
    // Each click should change the down situation
    $("#down").toggleClass("isDown");
});
// Instead of toggle simple click action is enough
$("#up").click( function() {
    // If its up already
    if ($(this).hasClass("isUp") == false) {
        $("#DropUp").stop().animate({bottom:0},250);
        // if header is down already this will hide it
        $("#DropDown").stop().animate({top:-250},220);
        $("#down").stop().animate({top:-5},220).removeClass("isDown");
    } else {
        $("#DropUp").stop().animate({bottom:-250},220);
    }
    // Each click should change the up situation
    $("#up").toggleClass("isUp");
});

小提琴：http: //jsfiddle.net/9DN52/43/

于 2012-11-29T08:17:19.530 回答