二.jQuery动画
1.滑块点击移动案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>滑块自动移动案例</title> <script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //设置点击事件控制滑块移动 $("button").click(function(){ window.setInterval(function(){ $("div").animate({ "left":"+=20px"//滑块移动距离 },100)//间隔时间 },10) }) }) </script> </head> <body> <button>按钮</button> <div style="background-color: red;width: 100px;height: 100px;position: absolute; left: 10px;"></div> </body> </html>
效果图：
2.animate自定义动画
//自定义动画 animate $("div").animate({ "width":"400px", "height":"300px", "left":"200px" },1000)
效果图 ：
3.控制透明度(括号参数携带过度时间)
//透明度 $("div").fadeIn(1000);//透明 $("div").fadeOut(1000);//不透明 $("div").toggle(1000);//控制透明或者不透明
效果图：
4.控制模块标签上拉下拉(括号参数携带过度时间)
$("div").slideUp(100);//上拉 $("div").slideDown(100);//下拉 $("div").slideToggle(100);//控制上拉或下拉
效果图 ：
