[英]How to add Transition Effects to JavaScript toggle menu?
I want to give a smooth transition effect (like the ease in out or fade) to a simple JavaScript toggle mobile menu. 我想给一个简单的JavaScript切换移动菜单一个平滑的过渡效果(如轻松的变色或淡入淡出)。
I have tried it achieving by CSS Transition effect but no luck but I am sure it can be either achieved by CSS or JavaScript. 我已经尝试过通过CSS Transition效果来实现它,但是没有运气,但是我确信它可以通过CSS或JavaScript来实现。 I think using CSS would be better unless it's impossible. 我认为除非有可能,否则使用CSS会更好。
Here is the code: 这是代码:
var toggle = document.getElementById("toggle");
var content = document.getElementById("content");
toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});
#content{
display:none;
}
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>
The content should be Show/Hide smoothly with ease in out or fade in/out effect. 内容应平滑显示/隐藏,并具有淡入淡出效果。 How is it possible? 这怎么可能?
here is your requiured solution. 这是您需要的解决方案。 Jquery makes your task easy and understandable. jQuery使您的任务轻松易懂。
var toggle = document.getElementById("toggle"); var content = document.getElementById("content"); $(document).ready(function(){ $("#toggle").click(function(){ $("#content").fadeToggle("slow"); /* $("#div3").fadeOut(3000); */ }); });
#content { width:80px; height:80px; background-color:blue; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="toggle">TOGGLE</button> <div id="content">Some content...</div>
You cannot animate display: none
, because you remove the element entirely. 您无法为显示设置动画display: none
,因为您已完全删除了元素。 Instead you could try and use a combination of visibility: visible
--> visibility: hidden
, and opacity: 1
--> opacity: 0
. 相反,您可以尝试使用visibility: visible
的组合visibility: visible
> visibility: hidden
和opacity: 1
> opacity: 0
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.