当前位置：首页 > news >正文

Jquery动画特效

news 2025/9/16 9:33:57

1，Jquery提供的特效方法

2，实例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="img\2ee18-231100-163232346010b0.jpg" alt="" id="god" width="500px" height="400px"><div><button id="show">显示</button><button id="hide">隐藏</button><button id="toggle">切换</button></div><p>淡入，淡出的测试</p><img src="img\2ee18-231100-163232346010b0.jpg" alt="" id="fadeText" width="500px" height="400px"><div><button id="fadeIn">淡入</button><button id="fadeOut">淡出</button><button id="fadetoggle">淡入，淡出切换</button></div><script  src="js/jquery-3.1.1.js" type="text/javascript"></script><script type="text/javascript">$(function(){// 显示和隐藏的动画效果$("#show").on("click",function(){$("#god").show();});$("#hide").on("click",function(){$("#god").hide(1000);});$("#toggle").on("click",function(){$("#god").toggle(1000,function(){alert("在显示和隐藏之间切换");});});//淡入，淡出$("#fadeIn").on("click",function(){$("#fadeText").fadeIn();});$("#fadeOut").on("click",function(){$("#fadeText").fadeOut(1000);});$("#fadetoggle").on("click",function(){$("#fadeText").fadeToggle(1000,function(){alert("在显示和隐藏之间切换");});});});</script> 
</body>
</html>

3，结果参考