大佬教程收集整理的这篇文章主要介绍了用jquery操作css元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我想制作一个代码,如果我点击按钮,2个div将同时移动,背景将被另一个不透明度为0.5的div覆盖
然后更改div class =“overlay”的z-index和opacity,然后检查#circleMenu是否有.open类,如果没有则添加.open类并移动#left和#right div
我使用自定义函数来运行onclick =“show()”
编辑
感谢@Tirthraj Barot,错误现在消失了.
仍然我的问题仍然存在,我希望代码在我点击按钮时执行此操作：
>更改叠加背景不透明度和z-index,使其覆盖正文
>同时移动圆圈内的2个div
我预计它会在同一时间执行,但事实上并非如此.我第一次点击按钮时,只覆盖了背景,第二次,背景覆盖消失但div移动
function show() { $(".overlay").css("z-index",1); $(".overlay").css("opacity",1); if ($("#circleMenu").hasClass("open") == truE) { $("#circleMenu").removeClass("open"); $("#left").css("left","-100px"); $("#right").css("right","-100px"); } else if ($("#circleMenu").hasClass("open") == falsE) { $("#circleMenu").addClass("open"); $("#left").css("left","100px"); $("#right").css("right","100px"); } } $(".show").on("click",function() { show(); });
body { margin : 0; padding : 0; width : 100%; height : 100%; } .overlay { width : 100%; height : 100%; BACkground-color : gray; opacity : 0; z-index : -1; position : absolute; transition : all 1s; } .kontainer-menu { width : 50%; height : 30%; margin : auto; position : relative; z-index : 2; top : 40%; } #circleMenu { width : 200px; height : 200px; border-radius : 50%; BACkground-color : red; z-index : 3; position : relative; left : 35%; } #left { width : auto; position : absolute; BACkground-color : green; top : 90px; left : 100px; } #right { width : auto; position : absolute; BACkground-color : teal; top : 90px; right : 100px; }
<div class="overlay"></div> <div class="kontainer-menu"> <button onclick="show()">Menu</button> <div id="circleMenu"> <div id="left"> menu Left</div> <div id="right"> menu Right</div> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
function show() { $(".overlay").css("z-index",1); if ($("#circleMenu").hasClass("open") == truE) { $("#circleMenu").removeClass("open"); $("#left").css("left","-100px"); $("#right").css("right","-100px"); } else if ($("#circleMenu").hasClass("open") == falsE) { $("#circleMenu").addClass("open"); $("#left").css("left","100px"); $("#right").css("right","100px"); } }
—————- updatE ———-
我更新了上面的代码.
您忘记在if和else块中在100和-100之后写入px.
———— updatE 2 ————
只是为了显示div,left和right的同时移动,并根据我的感知改变背景叠加颜色,我已经更新了你的代码.如果我误解了你的要求,请告诉我.
看看它.
function show() { if ($("#circleMenu").hasClass("open") == truE) { $(".overlay").css("z-index",1); $("#circleMenu").removeClass("open"); $("#left").css("left","-100px"); $("#right").css("right","-100px"); } else if ($("#circleMenu").hasClass("open") == falsE) { $(".overlay").css("z-index",0); $(".overlay").css("opacity",0); $("#circleMenu").addClass("open"); $("#left").css("left","100px"); $("#right").css("right","100px"); } } $(".show").on("click",function() { show(); });
body { margin: 0; padding: 0; width: 100%; height: 100%; } .overlay { width: 100%; height: 100%; BACkground-color: gray; opacity: 0; z-index: -1; position: absolute; transition: all 1s; } .kontainer-menu { width: 50%; height: 30%; margin: auto; position: relative; z-index: 2; top: 40%; } #circleMenu { width: 200px; height: 200px; border-radius: 50%; BACkground-color: red; z-index: 3; position: relative; left: 35%; } #left { width: auto; position: absolute; BACkground-color: green; top: 90px; left: 100px; transition: all 1s; } #right { width: auto; position: absolute; BACkground-color: teal; top: 90px; right: 100px; transition: all 1s; }
<div class="overlay"></div>
<div class="kontainer-menu">
<button onclick="show()">Menu</button>
<div id="circleMenu">
<div id="left">menu Left</div>
<div id="right">menu Right</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
以上是大佬教程为你收集整理的用jquery操作css元素全部内容，希望文章能够帮你解决用jquery操作css元素所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。