Question

我正在摆弄创建一个小滑出菜单。我遇到了问题，因为我现在意识到.animate()无法切换。

所以我计划创建一个CSS类并使用.cssToggle()代替，但这不是动画。

为了使菜单再次使用相同的图标关闭，可以将这样的东西切换为正确的方法是什么？

$( ".menu span" ).click(function() {
 $( ".menu" ).animate({
     left:0
  }, 500, function() {
  })
})

这是JSFiddle。

Answer 1

您可以查看＆＃39; .css（＆＃34;左＆＃34;）＆＃39;功能元素的左侧位置。当它的＆＃34; 0＆＃34;你将为＆＃34; xx＆＃34;设置变量的值。像素和它的时间＆＃34; xx＆＃34;然后你将设置变量为＆＃34; 0＆＃34;值。

Answer 2

当菜单显示在左侧并且不可见时，您可以隐藏菜单，当您再次点击它时，检查菜单是否可见，然后相应地执行操作：

$( ".menu span" ).click(function() {

var menu = $('.menu');

if($(menu).is(':visible')){
 $(menu).animate({
     left:0
  }, 500, function() {
      $(menu).hide();
  })
}else{


$(menu).show(function(){
   $(menu).animate({left:200},500);

})


});

我没有测试过代码，但我猜逻辑应该有效..

Answer 3

如何使用下面的动画来切换

<强> FIDDLE

$( ".menu span" ).click(function() {
   var th = $('.menu');
        if ($(th).css('left') !== '0px') {
            $(th).animate({
                "left": "0"
            }, 500);
        } else {
            $(th).animate({
                "left": "-95%"
            }, 500);
        }
});

Answer 4

我最后通过使用CSS3过渡来解决这个问题。我改为使用.toggleClass()，并将transition:1s;添加到影响菜单div位置的两种CSS样式中。这意味着单击时会添加或删除类，并且转换意味着它可以正常动画。

$( ".menu span" ).click(function() {
    $( ".menu" ).toggleClass('open');
});

.menu{position:absolute;left:-95%;height:100%;transition: 1s;}
.open{left:0; transition: 1s;}

JSFiddle here。

Answer 5

根据您的目标受众，我不会依赖javaScript而是css这样的简单动画。只需在菜单上切换课程，就像这样：

$( ".menu span" ).click(function() {
   $( ".menu" ).toggleClass('open');
})

而不是css中的所有魔法：

body {
  margin: 0;
  background-color: #bada55;
}
.main {
  padding: 20px;
}
.menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: pink;
  /* Move the menu off screen, adjust if you want that menu bar to be visible at all times */
  transform: translate(-100%, 0); 
  transition: transform 0.5s;
}
.menu span {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 100%;
  background: white;
  width: 20px;
  height: 20px;
}
.menu.open {
  transform: translate(0, 0); /* Move the menu to the desired place */
}
.menu.open span {
  /* Reposition the toggle element */
  right: 0;
  left: auto;
}

请参阅codepen上的示例。

我正在使用transform: translate(-100%, 0);和transform: translate(-100%, 0);，因为它表现更好，但您也可以使用position来获得对旧版浏览器的支持（但它们不会获得转换）。

有关浏览器支持的信息，请参阅caniuse。

切换动画，还是添加一个类？

5 个答案: