演示fadeIn、fadeOut和fadeTo方法的渐变动画效果
(1) fadeOut(speed,callback)
通过不透明度的变化来实现所有匹配元素的淡出效果。
把所有匹配元素的不透明度一渐进方式调整到指定的不透明度。
看一下控制台什么报错
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按钮,将执行$("#fadeOutDiv").fadeOut("slow",function(){alert("演示这个层慢慢消失了!")});
<br />
</div>
<br>(2)fadeIn(speed,callback)
<br>通过不透明度的变化来实现所有匹配元素的淡出效果。
<br>
<INPUT TYPE="submit" id="fadeIn" value="fadeIn">
<div id=fadeInDiv style="display:none">点击fadeIn按钮,将执行$("#fadeInDiv").fadeIn("slow",function(){alert("演示这个层慢慢出现了!")});</div>
<br>(3)fadeTo(speed,opacity,callback)
<p>把所有匹配元素的不透明度一渐进方式调整到指定的不透明度。</p>
<INPUT TYPE="submit" id="fadeTo" value="fadeTo">
<div id=fadeToDiv>点击fadeTo按钮,将执行$("#fadeToDiv").fadeTo("slow",function(){alert("演示这个层透明度变成50%了!")});</div>
<br>
<br>
</body>
</html>
您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~
ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632