小黑小波比.通过opacity实现淡化淡出

最新推荐文章于 2025-05-17 12:54:07 发布

转载最新推荐文章于 2025-05-17 12:54:07 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/snowbobo/blog/414913

文章标签：

#python #javascript #ViewUI

本文介绍了如何使用jQuery库实现一个div元素的淡入淡出动画效果，包括通过手机找回功能和按钮事件触发动画。通过实例代码演示了如何在HTML中创建两个div元素，并使用jQuery的css和setTimeout函数实现淡入淡出效果，提供了在线测试工具以供验证。

2019独角兽企业重金招聘Python工程师标准>>>

ByTea: function(sender, arg) { //通过手机找回
            _("#First").css("transition", "0.25s");
            _("#First").css("opacity", "0")
            setTimeout(function() {
                _("#First").hide();
                _("#teacher").show();
                _("#teacher").css("opacity", "1");
            }, 250);
        },

按钮事件.一个div淡出,同时另一个div淡入

然后用hide()和show()真正的隐藏和显示.提供用户进行操作.

可以用w3school在线测试工具测试工具,复制如下代码.粘贴到测试工具上,然后提交代码看效果!

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("#p1").css("transition","1.25s");
  $("#p1").css("opacity","0");
  setTimeout(function(){
   $("#p1").hide();
   $("#p2").show();
   $("#p2").css("opacity","1");

},1250);
  });
  $("#show").click(function(){
  $("#p2").css("transition","1.25s");
  $("#p2").css("opacity","0");
   setTimeout(function(){
   $("#p2").hide();
   $("#p1").show();
   $("#p1").css("opacity","1");
},1250);
  });
});
</script>
</head>
<body>
<p id="p1" style="display:true">如果点击“隐藏”按钮，我就会消失。</p></br>
<p id="p2" style="display:none">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>

转载于:https://my.oschina.net/snowbobo/blog/414913