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

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

尝试切换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。仅当可见性设置为“无”以外的其他内容时，幻灯片才有效。 2.只滑出，而不是退回。

我怎么能让这个人工作呢？

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

Answer 1

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

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

         
test
 
    

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

Answer 2

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") }); 

更新小提琴

希望这可以帮助！

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") }); 

小提琴

Answer 4

我改变了字体颜色。 此外，随意将if语句更改为更复杂的内容。 $（“＃initiate”）。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); } }); 

Answer 5

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

我在这里贴了一个例子……

https://jsfiddle.net/wyd1rxhg/

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

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