使用一个菜单按钮添加animate-in和animate-out类

Adding animate in and animate out classes with one menu button

本文关键字：添加 按钮 animate-in animate-out 菜单 一个      更新时间：2024-02-23

我想知道，对于所有javascript和jquery guru来说，我解决这个问题的最佳方法是什么。我所拥有的是一个通过CSS隐藏在屏幕底部的导航。我已经设法让它作为一个切换罚款-你可以在这里看到http://jsfiddle.net/olichalmers/Lby7vfdf/.

var body = $("body"); $("#menuBtn").click(function() {
body.toggleClass("showMenu");});

这显然意味着菜单上下滑动。

我的问题是，我想在第一次点击时向上动画菜单，然后当你再次点击按钮关闭它时，我希望导航窗口向上滑动。然后，当您再次单击它以打开它时，它将再次从底部出现。我一直在试着弄清楚这将如何工作，我认为这将是两个类（一个用于隐藏菜单，一个用于显示菜单），它们将从主体中添加和删除。我这里有一把小提琴http://jsfiddle.net/olichalmers/twqd2yj0/

var body = $("body"); $("#menuBtn").click(function() {
      if (body.hasClass("hideMenu")) {
        body.removeClass("hideMenu").addClass("showMenu");
      }
      else if (body.hasClass("showMenu")) {
        body.removeClass("showMenu").addClass("hideMenu");
      }});

这可能令人震惊，因为它试图找到这个问题的解决方案。我使用的是jquery，但也许它是一个使用事件侦听器的javascript解决方案，这是这里所需要的？我的jquery和javascript知识充其量是不完整的，因为我仍在学习中，所以如果我看起来很笨，请放松！

希望我已经足够清楚了。谢谢

我可以建议一种不同的方法吗？

在一个单独的DIV中创建底部菜单，该DIV位于HTML的顶部（直接位于BODY标记下）。使DIV position: fixed-将其从"流"中取出，并将其相对于视口（屏幕）定位，而不是相对于任何其他DIV或网页本身。现在，您可以根据某个触发器向上/向下移动它。

下面是一个代码示例：

jsFiddle演示

HTML:

<div id="botttrig"></div>
<div id="bottmenu">The menu is here</div>
<div id="wrap">
    <div id="content">
        <p>Content goes here</p>
        <p>Hover over small box at bottom left</p>
    </div>
</div>

jQuery:

$('#botttrig').hover(
    function(){
        $(this).fadeOut();
        $('#bottmenu').animate({
            'bottom': '0px'
        },500);
    },
    function(){
        //do nothing on hover out
    }
);
$('#bottmenu').hover(
    function(){
        //do nothing on hover in
    },
    function(){
        $('#bottmenu').animate({
            'bottom': '-80px'
        },500);
        $('#botttrig').fadeIn();
    }
);

另一个例子请参见jsFiddle。我去掉了触发框，让菜单的顶部10px在屏幕底部可见。悬停时，向上滑动菜单。您可能希望增加#bottmenudiv上的z索引，使其始终显示在页面上的其他div之上，以便它始终可见。

http://jsfiddle.net/twqd2yj0/4/

我使用了slideToggle（）并将display:none;添加到#navHold

相关文章：