fadeIn添加函数的方法

fadeln()方法类似于显示和隐藏方法中的toggle()方法，可以便捷的显示淡入以及淡出，在后面添加函数可以为它进行一些动态的变动。下面看代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淡入以及淡出</title>
    <script src="./jquery-3.3.1.min.js"></script>
    <style type="text/css">
        img{
            display: none;
        }
    </style>
</head>
<body>
    <p><img src="pic/2.jpg" id="pic"/></p>
    <input type="button" value="淡入" id="btn" />
    <script type="text/javascript">
        $("#btn").click(function(){
            if($(this).val()=="淡入"){
                $("#pic").fadeIn("slow",function(){
                    $(this).css({
                        "border":"1px solid #ccc","padding":"5px"
                    });
                })
                $(this).val("淡出");
            }else{
                $("#pic").fadeOut("slow");
                $(this).val("淡入");
            }
        });
    </script>
</body>
</html>

在这里是利用fadeIn中添加函数，来进行按钮的动态变动,使页面更加的完整好看。
一点小小的经验希望可以帮助你。

fadeIn添加函数的方法

推荐阅读更多精彩内容