Home >Web Front-end >JS Tutorial >Summary of usage of fadeIn, fadeOut and fadeTo in jQuery
<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 () { $('#Button1').bind('click', function () { $('img').fadeOut(2000, function () { $('#Button1').val('哎,没了'); //图片的消失 }); }) $('#Button2').bind('click', function () { $('img').fadeIn(2000, function () { $('#Button2').val('有了'); //图片的呈现 }); }) $('#Button3').bind('click', function () { $('img').fadeTo(2000, 0.3, function () { alert('动画执行完毕'); //图片透明度 }); }) $('#Select1').bind('change', function () { //可以是change或者是click事件 $('img').fadeTo(1000, $('#Select1 option:selected').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>
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!