Question

嗨我的脚本有点问题，当我点击汉堡包菜单时应该为div设置动画然后如果你再次点击汉堡菜单它应该关闭div（动画：slideOutUp）。当我使用.css（“display”，“none”）时会出现问题。它没有动画任何东西，如果我不使用.css（“display”，“none”）它只能运行一次，因为它有display：block 。有完整的网站代码http://codepen.io/anon/pen/bBxVbJ#anon-login

(function () {
  $('#hamburger-menu').on('click', function() {
    $('#bar').toggleClass('animate');
    if($('#menu-cover').css("display") == "none"){
       $('#menu-cover').css("display", "block").removeClass("slideOutUp").addClass("zoomIn");
    }
    else{
      $('#menu-cover').removeClass("zoomIn").addClass("slideOutUp").css("display", "none");
    }})
})();

Answer 1

您可以在jQuery slideToggle()函数中使用构建.....

$('#menu-cover').slideToggle();

Updated codepen

放大和当前CSS的问题是div上的display: none。由于div不可见......它不会放大。所以你需要先添加隐藏的类。但这会导致在页面加载时看到关闭的状态类动画。所以，我还添加了＆＃34;隐藏＆＃34; class，然后通过jquery删除它。这样做是因为初始页面加载不会显示菜单动画，但动画将与后续点击一起使用。

此外，而不是if / else语句，只需使用jquery＆＃39; s toggleClass()在两个类之间切换就更清晰了。

$('#menu-cover').removeClass('hidden').toggleClass('zoomInDown slideOutUp');

Updated codepen

<div id="menu-cover" class="animated slideOutUp hidden"></div>

(function () {
  $('#hamburger-menu').on('click', function() {
    $('#bar').toggleClass('animate');
    $('#menu-cover').removeClass('hidden').toggleClass("zoomInDown slideOutUp");
    })
})();

结合animate.css和CSS属性：在条件中显示

1 个答案: