gpt4 book ai didi

jquery - CSS3 动画与 jQuery

转载 作者:行者123 更新时间:2023-12-01 05:40:24 25 4
gpt4 key购买 nike

这个镜头有点长,但这里是 - 我是 css3 动画新手,所以请裸露......

Codepen link

	$(document).ready(function(){
$("#menu").mmenu({
extensions : [ "theme-dark", "effect-slide-menu", "effect-slide-listitems" ],
iconPanels : {
add : true,
visible : 1,
hideNavbars : true
}

})




$("#hamburger").click(function(){
$(".burger .one, .burger .two, .burger .three, .circle").css("-webkit-animation-play-state", "running");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/css/jquery.mmenu.all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div class="header">

<a href="#menu" id="hamburger">

<div class="burger">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>

<div class="circle"></div>

</a>
Demo
</div>
<div class="content">
<p><strong>This is a demo.</strong><br />
Click the menu icon to open the menu.</p>
</div>
</div>

<!-- The page End-->

<!-- The menu -->
<nav id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About us</a>
<ul>
<li><a href="/about/history">History</a></li>
<li><a href="/about/team">The team</a></li>
<li><a href="/about/address">Our address</a></li>
</ul>
</li>
<li><a href="/contact">Contact</a></li>
</ul>

当汉堡菜单打开时,动画在图标上开始,但当您关闭它时,动画保持在打开状态。我想让它恢复到原来的状态

提前致谢

最佳答案

使用 mm-blocker 的 mousedown 事件重置之前的样式。我使用动画方向反转来做到这一点。这是代码笔 http://codepen.io/anon/pen/gpoPqQ

     $("#mm-blocker").on( "mousedown",function(){
$(".burger .one, .burger .two, .burger .three, .circle").css("-webkit-animation-direction", "normal");
} );


$("#hamburger").click(function(){
$(".burger .one, .burger .two, .burger .three, .circle").css("-webkit-animation-direction", "reverse");
$(".burger .one, .burger .two, .burger .three, .circle").css("-webkit-animation-direction", "running");

});

关于jquery - CSS3 动画与 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31077907/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com