20-(JQuery动画)淡入淡出_jq infinite(20

作者：繁依Fanyi0 | 2024-06-02 01:49:22

踩

jq infinite(20


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 300px;
			background:orange;
			display: none;
		}
	</style>
</head>
<body>
	<input type="button" value="显示">
	<input type="button" value="隐藏">
	<input type="button" value="切换">
	<div></div>
	<!-- 1.需要引入外部的jQuery文件 -->
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		$(function () {
			$("input").eq(0).click(function () {
				// fadeIn(null/speed,easing,callback)/fadeOut()
				$("div").fadeIn("slow",function () {
					console.log(1111)
				})				
			})
			$("input").eq(1).click(function () {
				$("div").fadeOut("slow",function () {
					console.log(2222)
				})		
			})
			$("input").eq(2).click(function () {
				$("div").fadeToggle("slow",function () {
					console.log(3333)
				})		
			})
		})
	</script>
</body>
</html>

上述运行结果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/660356