Summary of usage of fadeIn, fadeOut and fadeTo in jQuery-JS Tutorial-php.cn

Summary of usage of fadeIn, fadeOut and fadeTo in jQuery

巴扎黑

Release： 2017-06-30 10:10:51

Original

1638 people have browsed it

<head>
    <title></title>
    <style type="text/css">
    #img1
    {
        width:400px; height:500px;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(&#39;#Button1&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).fadeOut(2000, function () {
                    $(&#39;#Button1&#39;).val(&#39;哎，没了&#39;);      //图片的消失
                });
            })
            $(&#39;#Button2&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).fadeIn(2000, function () {
                    $(&#39;#Button2&#39;).val(&#39;有了&#39;);      //图片的呈现
                });
            })
            $(&#39;#Button3&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).fadeTo(2000, 0.3, function () {
                    alert(&#39;动画执行完毕&#39;);       //图片透明度
                });
            })
            $(&#39;#Select1&#39;).bind(&#39;change&#39;, function () { //可以是change或者是click事件
                $(&#39;img&#39;).fadeTo(1000, $(&#39;#Select1 option:selected&#39;).val());
            })
        })
    </script>
</head>
<body>
<img src="images/1.jpg" id="img1" />
    <input id="Button1" type="button" value="button" />
    <input id="Button2" type="button" value="button" />
    <input id="Button3" type="button" value="button" />
    <select id="Select1">
        <option>1</option>
        <option>0.1</option>
        <option>0.2</option>
        <option>0.3</option>
        <option>0.4</option>
        <option>0.5</option>
        <option>0.6</option>
        <option>0.7</option>
        <option>0.8</option>
        <option>0.9</option>
        <option>0</option>
    </select>
</body>

Copy after login

The above is the detailed content of Summary of usage of fadeIn, fadeOut and fadeTo in jQuery. For more information, please follow other related articles on the PHP Chinese website!