javascript - 如何使用 css 显示 :none 切换动画

Question

希望这能将缺少空白的帖子联系在一起，因为我在这方面遇到了很多麻烦。

尝试切换 div，使其在每次按下按钮时滑出 View 并返回 View 。最终会是两个或更多的隔板同时滑出。我正在使用:

//css
display {visibility:hidden}

然后检查代码:

//js$
("#initiate").click( function(event) {
$("#initiate").click( function(event) {
  if ($("#nav").is(":hidden")) {
    $("#nav").stop().animate({
      right: '520px'
    }, 1300);
            }
    else {
      $("#nav").stop().animate({
        right: '320px'
      }, 1300);
    }

  });

多个问题:1. 仅当可见性设置为“无”以外的值时，滑动才有效。2. 只滑出，不滑回。

伙计们，我怎样才能让这项工作成功？

http://jsfiddle.net/c48vdqf6/2/

Answer 1

display 属性不能设置动画，这是开发人员经常遇到的问题，但 CSS 不允许这样做。

您必须设置 right 属性，使其离开屏幕，并在需要时像您在 Fiddle 中那样以动画方式滑入屏幕。

编辑

至于

Only slides out, not back in.

只需使用一个类来确定元素的位置

像这样:

$("#initiate").click(function(event) {
    if ($("#nav").hasClass("hidden")) {
        $("#nav").stop().animate({
            right: '-320px'
        }, 1300);

    } else {
        $("#nav").stop().animate({
            right: '520px'
        }, 1300);
    }
    $("#nav").toggleClass("hidden")
});

已更新 Fiddle

希望对您有所帮助!