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

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>



你可能感兴趣的:(js,css,小黑小波比)