怎么设置div隐藏动画效果，如何使用js动态显示或隐藏DIV

来源：整理时间：2023-05-23 10:07:40 编辑：航空兔素材手机版

本文目录一览

1，如何使用js动态显示或隐藏DIV
2，删除div如何添加动画效果淡出效果
3，如何制作div的显示与隐藏
4，css动画div设置了动画但不希望DIV内部的文字也跟着动
5，设置一个按钮怎么将div隐藏显示

1，如何使用js动态显示或隐藏DIV

最简单的方法，在div的style属性里面加上display:none;然后，如果需要显示就用element.show();隐藏就用 element.hide();

如何使用js动态显示或隐藏DIV

2，删除div如何添加动画效果淡出效果

其实很简单嘛，其实你细心想一下，它其实就是使用了定时器和一个淡出效果结合，你首先设置一个定时器，时间设置为（淡出效果时间），你点击之后执行淡出效果，然后定时器的执行时间就是淡出效果的时间。

删除div如何添加动画效果淡出效果

3，如何制作div的显示与隐藏

这个1.你把product和这个二级菜单放在一个大div里，然后mouseover这个大的div就可以了2.你在二级菜单的div上也加个mouseover方法就可以了

如何制作div的显示与隐藏

4，css动画div设置了动画但不希望DIV内部的文字也跟着动

把文字和背景分别放到两个平级的div中，文字覆盖在背景的上面，然后只需要把动画作用到背景所在的div上，这样文字不受影响就可以保持不动了。而且，这样一来，外框与背景就不需要做反向运动，只需要背景动即可，外框保持不动，这样只需要一个动画，提高了效率：<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>#myDIVwidth:100px;height:100px;position:relative;}@keyframes mymove0% 100% }#mybakposition:absolute;left:0;top:0;width:100px;height:100px;background:black;-webkit-animation:mymove 10s infinite;}#mynumposition:absolute;left:0;top:0;width:100px;height:100px;text-align:center;color:white;font-size:70px;line-height:100px;}</style></head><body><div id="myDIV"><div id="mybak"></div><div id="mynum">10</div></div></body></html>

5，设置一个按钮怎么将div隐藏显示

<!doctype html><html><head><meta charset="utf-8"><title>div5px</title><style type="text/css">div float: left; width: 100px; height: 80px; border: 1px solid #0ff; margin-right: 5px; display: none;}</style><script type="text/javascript" src="http://www.sz886.com/js/jquery-1.9.1.min.js"></script><script type="text/javascript">$(document).ready(function(e) $(".btn").click(function() if(!$(".div").is(":visible")) $(".div").show(); $(this).val("隐藏"); }else $(".div").hide(); $(this).val("显示"); } });});</script></head><body><div class="div"></div><input type="button" value="显示" class="btn"/></body></html>