Question

希望这会将缺少缺口的帖子联系在一起，因为我遇到了很多麻烦。

尝试切换div，使其在每次按下按钮时滑出视图并返回视图。最终将同时滑出两个或更多分隔线。我正在使用：

//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.仅当可见性设置为＆＃34;无以外的其他内容时，幻灯片才有效。＆＃34; 2.只滑出，而不是退回。

我怎样才能让这个人工作？

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

Answer 1

display属性无法设置动画，这通常是开发人员陷入困境的一点，但CSS并不允许它。

您必须设置right属性，使其不在屏幕上，并在需要时动画以滑入屏幕，就像您在小提琴中所做的那样。

修改

至于

只滑出，而不是退回。

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

像这样：

$("#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

希望这有帮助！

Answer 2

采用稍微不同的方法，我宁愿用css3做动画，感谢转换，然后使用javascript / jquery切换类：

https://jsbin.com/yovaqo/edit?html,css,js,output

<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<style>
#display{
  width:300px;
  height:100vh;
  position:fixed;
  top:0;
  right:0;
  background-color:black;
  transition:right 0.5s ease;
}
#display.hide{
  right:-300px;
}
</style>
</head>
<body>
<p id="initiate">test</p>
<div id="display" class="hide"></div>
<script>
$("#initiate").on("click",function(){
 $("#display").toggleClass("hide");
});
</script>
</body>
</html>

它引入了较少的代码复杂性，并且从长远来看（以及使用多个滑动div等）更容易维护。

Answer 3

只需使用类或标志来确定元素的位置，而不是检查元素是否可见

$("#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

Answer 4

所以我用CSS而不是Javascript来做这个，然后使用Javascript添加和删除一类＆＃39; show＆＃39;或类似的东西。我刚刚为画布菜单做了类似的事情。

我已经为你发了一个例子......

https://jsfiddle.net/wyd1rxhg/

.menu {
  transition: left 0.5s ease;
  position: absolute;
  width: 400px;
  left: -400px;
  background-color: red;
}

.show {
  left: 0;
}

至于它重新滑入，只需删除show class并关闭它即可！

Answer 5

我改变了字体颜色。此外，随意将if语句更改为更复杂的内容。 $（＆＃34; #resentation＆＃34;）。click（function（event）{

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

if ($("#nav").css('right') == "320px") {
  $("#nav").stop().animate({
    right: '-320px'
  }, 1300);
}
else {
  $("#nav").stop().animate({
    right: '320px'
  }, 1300);
}
});

如何使用css display：none切换动画

5 个答案: