jQuery中的动画效果-蒲公英云

jQuery中的动画效果

亦凉 2022-01-21 08:59 460阅读 0赞

步骤：
1、导入jQuery相关的文件
2、文档加载完成事件：$(function)：页面初始化的操作：绑定事件，启动页面定时器
3、确定相关操作的事件
4、事件触发函数
5、函数里面再去操作相关的元素
6、显示和隐藏image

（按对角方式显示隐藏）

<!DOCTYPE html>
<html>
<head>
    <title>jquery</title>
    <script type="text/javascript" src="/js/jquery-3.4.1.js"></script>
</head>
<body>
    <input type="button" value="显示" id="btn1">
    <input type="button" value="隐藏" id="btn2"><br>
    <img src="img/1.jpg" id="img1" width="500px">
    <script> $(function() { //显示页面图片 $("#btn1").click(function() { $("#img1").show(); //按对角打开 }) //隐藏页面图片 $("#btn2").click(function() { //获得image $("#img1").hide(10000); //按对角关闭 }); }); </script>
</body>
</html>

（上下显示隐藏）

<script> $(function() { //显示页面图片 $("#btn1").click(function() { $("#img1").slideDown(); //向下打开 }) //隐藏页面图片 $("#btn2").click(function() { //获得image $("#img1").slideUp(500); //向上收起 }); }); </script>

（淡入淡出效果）

<script> $(function() { //显示页面图片 $("#btn1").click(function() { $("#img1").fadeIn(); //淡入淡出效果 }) //隐藏页面图片 $("#btn2").click(function() { //获得image $("#img1").fadeOut(1000); //淡入淡出效果 }); }); </script>

（自定义淡入淡出效果）

<script> $(function() { //显示页面图片 $("#btn1").click(function() { $("#img1").animate({ width:"1000px",opacity:"1"},5000); }) //隐藏页面图片 $("#btn2").click(function() { $("#img1").animate({ width:"1000px",opacity:"0.2"},5000); }); }); </script>