jQuery中fadeIn、fadeOut、fadeTo的用法
程序员文章站
2022-05-11 15:52:52
...
<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>
以上就是jQuery中fadeIn、fadeOut、fadeTo的用法的详细内容,更多请关注其它相关文章!
推荐阅读