jQuery中fadeIn、fadeOut、fadeTo的使用方法,代码如下:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #img1 { width:400px; height:500px; } </style> <script src="https://jiangweishan.com/zb_system/script/common.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>
网友评论文明上网理性发言 已有0人参与
发表评论: