按钮的淡入淡出效果

最新推荐文章于 2022-04-13 20:24:49 发布

bangxionger9224

最新推荐文章于 2022-04-13 20:24:49 发布

阅读量417

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/theWayToAce/p/5527635.html

版权

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
 <title></title>
 <link type="text/css" rel="stylesheet" href="index.css"/>
 <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
 <style type="text/css">
 .divTitle {
width: 329px;
height: 47px;

text-align: center;
 }

 .btn {
color: snow;
background: #25830a;
font-size: 16px;
margin-top: 10px;

 }

 .divTip {
width: 279px;
height: 27px;
line-height: 27px;
border: 1px red solid;
 }

 </style>
 <script type="text/javascript">
 $(function () {
 img = $("img"); //获取图片元素对象
 tip = $(".divTip"); //获取提示信息对象
 $("input:eq(0)").click(function () { //第一个按钮单机事件
 tip.html(""); // 清空提示内容
 img.fadeIn(3000, function () {//在3000毫秒淡入一张图片，并执行一个回调方法
 tip.html("淡入成功！");
 })
 })

 $("input:eq(1)").click(function () {
 tip.html("");
 img.fadeOut(3000, function () {
 tip.html("淡出成功！");
 })
 })
 });
 </script>
</head>

<body>
<div class="divFrame">
 <div class="divTitle">
 <input id="btn1" type="button" value="淡入按钮" class="btn"/>
 <input id="btn2" type="button" value="淡出按钮" class="btn"/>

 </div>

 <div class="divContent">
 <div class="divTip"></div>
 <img src="img/floower (1).jpg" alt="" title="设备图片"/>
 </div>
</div>
</body>

</html>

result：

转载于:https://www.cnblogs.com/theWayToAce/p/5527635.html

bangxionger9224

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
按钮的淡入淡出效果

HTML：<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <link type="text/css" rel="stylesheet" href="index.css"/> <scri...
复制链接

扫一扫