简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

animasi kecerunan warna jQuery

Animasi kecerunan warna

fadeIn(belanja,[panggilan balik]): Tukar kelegapan untuk mencapai kesan fade-in (paparan) semua elemen padanan

fadeOut(belanja,[panggilan balik ]) :Mencapai kesan fade-out (tersembunyi) bagi semua padanan melalui perubahan dalam kelegapan

fadeTo(spend,opacity,[callback]): Laraskan ketelusan semua elemen padanan kepada kelegapan yang ditentukan dalam progresif cara

fadeToggle(belanja,[panggilan balik]): Tukar kesan fade-in dan fade-out semua elemen padanan melalui perubahan dalam kelegapan

Kesan animasi kecerunan warna 

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        function f1(){
            //隐藏 
            $('div').fadeOut(3000);
        }
        function f2(){
            //显示 show
            $('div').fadeIn(3000);
        }
        function f3(){
            $('div').fadeToggle(3000);
        }
        </script>
        <style type="text/css">
        div {width:300px; height:200px; background-color:blue;}
        </style>
    </head>
    <body>
        <div></div>
        <input type="button" value="隐藏" onclick="f1()" />
        <input type="button" value="显示" onclick="f2()" />
        <input type="button" value="开关" onclick="f3()" />
    </body>
</html>

Tetapkan ketelusan yang ditentukan

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        function f1(){
            //fadeTo(speed, opacity 透多0-1透少, [callback])
            $('#two').fadeTo(0,0.3);
        }
        </script>
        <style type="text/css">
        #one {width:300px; height:200px; background-color:yellow; 
            font-size:35px; font-weight:bold;
            position:absolute; left:40px; top:40px;
        }
        #two {width:300px; height:200px; background-color:green; 
            font-size:35px; font-weight:bold;
             position:absolute; left:60px; top:60px;
        }
        </style>
    </head>
    <body>
        <div id="one">this is one div</div>
        <div id="two">this is two div</div>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <input type="button" value="设置" onclick="f1()" />
    </body>
</html>
Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> function f1(){ //隐藏 $('div').fadeOut(3000); } function f2(){ //显示 show $('div').fadeIn(3000); } function f3(){ $('div').fadeToggle(3000); } </script> <style type="text/css"> div {width:300px; height:200px; background-color:blue;} </style> </head> <body> <div></div> <input type="button" value="隐藏" onclick="f1()" /> <input type="button" value="显示" onclick="f2()" /> <input type="button" value="开关" onclick="f3()" /> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492111 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！