为什么结果没有呈现出相应的动画效果

项目拓展4:页面特定元素的渐变动画效果

演示fadeIn、fadeOut和fadeTo方法的渐变动画效果

(1) fadeOut(speed,callback)
通过不透明度的变化来实现所有匹配元素的淡出效果。

点击fadeOut按钮,将执行$("#fadeOutDiv").fadeOut("slow",function(){alert("演示这个层慢慢消失了!")});

(2)fadeIn(speed,callback)
通过不透明度的变化来实现所有匹配元素的淡出效果。

(3)fadeTo(speed,opacity,callback)

把所有匹配元素的不透明度一渐进方式调整到指定的不透明度。

点击fadeTo按钮,将执行$("#fadeToDiv").fadeTo("slow",function(){alert("演示这个层透明度变成50%了!")});


看一下控制台什么报错

jquery有没有正确引入

你发一下完整代码,这要结合html与css代码来看才能知道原因

元素你一开始要隐藏,这样才能看到显示动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>项目拓展4:页面特定元素的渐变动画</title>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<style>
			.redborder{border:2px dashed #ff0000 }
		</style>
		<script type="text/javascript">
			<!-- 
			$(document).ready(function() {
				$("div").addClass("redborder");
				$("#fadeOut").click(function() {
					$("#fadeOutDiv").fadeOut("slow", function() {
						alert("演示这个层慢慢消失了!")
					});
				});
				$("#fadeOutUndo").click(function() {
					$("#fadeOutDiv").fadeIn("fast");
				});
				$("#fadeIn").click(function() {
					$("#fadeInDiv").fadeIn("slow", function() {
						alert("演示这个层慢慢出现了!")
					});
				});
				$("#fadeTo").click(function() {
					$("#fadeToDiv").fadeTo("slow", 0.5, function() {
						alert("演示这个层透明度变成了50%了!")
					});
				});
			})
		 //-->
		</script>
	</head>
	<body>
		 <h2>项目拓展4:页面特定元素的渐变动画效果</h2> 
		<p>演示fadeIn、fadeOut和fadeTo方法的渐变动画效果</p>
		<p>(1) fadeOut(speed,callback)
			<br>通过不透明度的变化来实现所有匹配元素的淡出效果。
			<br>
			<input type="submit" id="fadeOut" value="fadeOut">
			<input type="submit" id="fadeOutUndo" value="fadeIn恢复">
		</p>
		<div id=fadeOutDiv>点击fadeOut按钮,将执行$(&quot;#fadeOutDiv&quot;).fadeOut(&quot;slow&quot;,function(){alert(&quot;演示这个层慢慢消失了!&quot;)});
			<br />
		</div>
		<br>(2)fadeIn(speed,callback)
		<br>通过不透明度的变化来实现所有匹配元素的淡出效果。
		<br>
		<INPUT TYPE="submit" id="fadeIn" value="fadeIn">
		<div id=fadeInDiv style="display:none">点击fadeIn按钮,将执行$(&quot;#fadeInDiv&quot;).fadeIn(&quot;slow&quot;,function(){alert(&quot;演示这个层慢慢出现了!&quot;)});</div>
		<br>(3)fadeTo(speed,opacity,callback)
		<p>把所有匹配元素的不透明度一渐进方式调整到指定的不透明度。</p>
		<INPUT TYPE="submit" id="fadeTo" value="fadeTo">
		<div id=fadeToDiv>点击fadeTo按钮,将执行$(&quot;#fadeToDiv&quot;).fadeTo(&quot;slow&quot;,function(){alert(&quot;演示这个层透明度变成50%了!&quot;)});</div>
		<br>
		<br>
	</body>

</html>

 

您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632