• jquery动画效果

    显示于隐藏方法：

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 		<title>title>
    7. 		<script src="../jQuery3.6.0.js">script>
    8. 		<script>
    9. 			$(function() {
    10. 				$("#anniu").click(function() {
    11. 					if ($("#anniu").val() == "显示") {
    12. 						$("#img1").show("slow", function() {
    13. 							$("#img1").css({
    14. 								"border": "1px solid red",
    15. 								"background-color": "red"
    16. 							});
    17. 						});
    18. 						$("#anniu").val("隐藏");
    19. 					} else {
    20. 						$("#img1").hide("slow");
    21. 						$("#anniu").val("显示")
    22. 					}
    23. 				});
    24. 			});
    25. 		script>
    26. 	head>
    27. 	<body>
    28. 		<img style="display: none;" src="../img/3.png" id="img1" />
    29. 		<br/>
    30. 		<input type="button" value="显示" id="anniu" />
    31. 	body>
    32. html>

    多个参数时可以用“{}”包起来，用“,”隔开

     隐藏与显示之间切换：

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 		<title>title>
    7. 		<style>
    8. 			* {
    9. 				margin: 0px;
    10. 				padding: 0px;
    11. 			}
    12.  
    13. 			body {
    14. 				font-size: 12px;
    15. 			}
    16.  
    17. 			ul {
    18. 				list-style: none;
    19.  
    20. 			}
    21.  
    22. 			ul li {
    23. 				height: 30px;
    24. 				width: 100px;
    25. 				text-align: center;
    26. 				border: 1px solid paleturquoise;
    27. 				border-bottom: none;
    28. 			}
    29.  
    30. 			ul li a {
    31. 				text-decoration: none;
    32. 			}
    33.  
    34. 			ul li.img1 {
    35. 				background-image: url(../img/up.png);
    36. 				background-repeat: no-repeat;
    37. 				border-top: 1px solid paleturquoise;
    38. 				border-right: 0;
    39. 			}
    40. 			ul li.down{
    41. 				background-image: url(../img/end.png);
    42. 			}
    43. 		style>
    44. 		<script src="../jQuery3.6.0.js">script>
    45. 		<script>
    46. 			$(function(){
    47. 				$(".img1").click(function(){
    48. 					$("#div1 li:gt(5):not(:last)").fadeToggle();
    49. 					$(".img1").toggleClass("down");
    50. 				});
    51. 			});
    52. 		script>
    53. 	head>
    54. 	<body id="div1">
    55. 		<ul>
    56. 			<li><a href="#">9快9包邮a>li>
    57. 			<li><a href="#">大货精选a>li>
    58. 			<li><a href="#">海外海购a>li>
    59. 			<li><a href="#">大厂直销a>li>
    60. 			<li><a href="#">超值抢购a>li>
    61. 			<li><a href="#">家电办公a>li>
    62. 			<li><a href="#">母婴用品a>li>
    63. 			<li><a href="#">护肤美容a>li>
    64. 			<li><a href="#">手机数码a>li>
    65. 			<li><a href="#">户外运动a>li>
    66. 			<li><a href="#">家具家电a>li>
    67. 			<li class="img1">li>
    68. 		ul>
    69. 	body>
    70. html>

    fadeToggle方法会检测是否隐藏或显示，来回之间互相切换

    缓慢出现和缓慢隐藏：

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 		<title>title>
    7. 		<script src="../jQuery3.6.0.js">script>
    8. 		<script>
    9. 			$(function() {
    10. 				$("#anniu").click(function() {
    11. 					if ($("#anniu").val() == "显示") {
    12. 						$("#img1").fadeIn("slow", function() {
    13. 							$("#img1").css({
    14. 								"border": "1px solid red",
    15. 								"background-color": "red"
    16. 							});
    17. 						});
    18. 						$("#anniu").val("隐藏");
    19. 					} else {
    20. 						$("#img1").fadeOut("slow");
    21. 						$("#anniu").val("显示")
    22. 					}
    23. 				});
    24. 			});
    25. 		script>
    26. 	head>
    27. 	<body>
    28. 		<img style="display: none;" src="../img/3.png" id="img1" />
    29. 		<br/>
    30. 		<input type="button" value="显示" id="anniu" />
    31. 	body>
    32. html>

    通过下拉框改变透明度：

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 		<title>title>
    7. 		<script src="../jQuery3.6.0.js">script>
    8. 		<script>
    9. 			$(function(){
    10. 				$("#sel").change(function(){
    11. 					var date=$("#sel").val();
    12. 					$("#img").fadeTo(1000,date);
    13. 				});
    14. 			});
    15. 		script>
    16. 	head>
    17. 	<body>
    18. 		<img src="../img/ys.png" id="img"/>
    19. 		<select id="sel">
    20. 			<option value="0.2">0.2option>
    21. 			<option value="0.4">0.4option>
    22. 			<option value="0.6">0.6option>
    23. 			<option value="0.8">0.8option>
    24. 			<option value="1" selected="selected">1option>
    25. 		select>
    26. 	body>
    27. html>

    鼠标悬浮、点击：显示、隐藏：

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 		<title>title>
    7. 		<style>
    8. 			* {
    9. 				margin: 0px;
    10. 				padding: 0px;
    11. 			}
    12.  
    13. 			#ul1 {
    14. 				list-style: none;
    15. 			}
    16.  
    17. 			#ul1 li {
    18. 				width: 120px;
    19. 				float: left;
    20. 				margin-left: 20px;
    21. 			}
    22.  
    23. 			#ul1 li ul li {
    24. 				width: 100px;
    25. 				float: none;
    26. 				list-style: none;
    27. 				border: 1px solid red;
    28. 				display: none;
    29. 			}
    30. 		style>
    31. 		<script src="../jQuery3.6.0.js">script>
    32. 		<script>
    33. 			$(function() {
    34.                 //点击显示、隐藏
    35. 				// $("#rmyy").click(function(){
    36. 				// 	$("#rmyy ul li").stop(true,false).slideToggle(250);
    37. 				// });
    38. 				$("#rmyy").hover(function() {
    39. 					$("#rmyy ul li").slideDown(250);
    40. 				}, function() {
    41. 					$("#rmyy ul li").stop(true, false).slideUp(250);
    42. 				});
    43. 			});
    44. 		script>
    45. 	head>
    46. 	<body>
    47. 		<ul id="ul1">
    48. 			<li id="rmyy"><a href="#">热门音乐a>
    49. 				<ul>
    50. 					<li><a href="#">江南stala>li>
    51. 					<li>错错错li>
    52. 					<li>御剑飞行li>
    53. 				ul>
    54. 			li>
    55. 			<li>我的音乐li>
    56. 			<li>联系商家li>
    57. 			<li>我的VIPli>
    58. 		ul>
    59. 	body>
    60. html>

    自定义动画：

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 		<title>title>
    7. 		<script src="../jQuery3.6.0.js">script>
    8. 		<script>
    9. 			$(function() {
    10. 				$("#img1").click(function() {
    11. 					$(this).animate({
    12. 						width: "500px"
    13. 					}, "slow");
    14. 					$(this).animate({
    15. 						height: "200px"
    16. 					}, "slow");
    17. 					$(this).animate({
    18. 						width: "200px"
    19. 					}, "slow");
    20. 					$(this).animate({
    21. 						height: "50px"
    22. 					}, "slow");
    23. 				});
    24. 			});
    25. 		script>
    26.  
    27.  
    28. 	head>
    29. 	<body id="div1">
    30. 		<img src="../img/3.png" id="img1" />
    31. 	body>
    32. html>

    利用animate方法

     

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 		<title>title>
    7. 		<script src="../jQuery3.6.0.js">script>
    8. 		<script>
    9. 			$(function() {
    10. 				$("#img1").click(function() {
    11. 					$(this).animate({left:"+=100px",top:"+=100px",opacity:0.5},3000);
    12. 				});
    13. 			});
    14. 		script>
    15. 		<style>
    16. 			#img1{
    17. 				position: absolute;
    18. 			}
    19. 		style>
    20. 	head>
    21. 	<body id="div1">
    22. 		<img src="../img/3.png" id="img1" />
    23. 	body>
    24. html>
    25.  
    26.

     移动位置前要将位置改为绝对定位

        position: absolute;

  • 相关阅读:
    FileChannel 文件流的简单使用
    ActiveMQ、RabbitMQ、Kafka、RocketMQ在事务性消息、性能、高可用和容错、定时消息、负载均衡、刷盘策略的区别
    Codeforces Round #805 (Div. 3)总结
    vue3+scss开启写轮眼
    hadoop-2.6.4集群编译搭建-阿里云和腾讯云
    Figure 02 机器人发布：未来AI的巅峰还是泡沫中的救命稻草？
    VMware ubuntu空间越用越大
    【SpringMVC】RESTFul风格设计和实战 第三期
    鸿蒙 Harmony 的跨端技术方案
    mybatis关联关系映射
  • 原文地址：https://blog.csdn.net/qx020814/article/details/126033318