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

最新推荐文章于 2022-02-15 16:35:26 发布

BobbyLou博博

最新推荐文章于 2022-02-15 16:35:26 发布

阅读量1.1k

点赞数

分类专栏： bootstrap 文章标签： css 小黑小波比 js

本文链接：https://blog.csdn.net/u010489586/article/details/39503397

版权

bootstrap 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>

BobbyLou博博

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小黑小波比.通过opacity实现淡化淡出

ByTea: function(sender, arg) { //通过手机找回 _("#First").css("transition", "0.25s"); _("#First").css("opacity", "0") setTimeout(function() { _("#First").
复制链接

扫一扫