本教程操作环境:windows7系统、jquery1.10.2版本、dell g3电脑。
jquery让图片逐渐消失
方法1:使用fadeout()---不占位的让图片逐渐消失
fadeout() 方法使用淡出效果来隐藏被选元素
<!doctype html><html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("img").fadeout(3000); }); }); </script> </head> <body> <img src="img/3.jpg" width="400" /><br><br> <button>让图片逐渐消失</button> </body></html>
方法2:使用fadeto()---占位的让图片逐渐消失
fadeto() 方法将被选元素的不透明度逐渐地改变为指定的值。
只需要将最终的透明度降为0即可。
<!doctype html><html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("img").fadeto(3000,0); }); }); </script> </head> <body> <img src="img/3.jpg" width="400" /><br><br> <button>让图片逐渐消失</button> </body></html>
【推荐学习:jquery视频教程、web前端视频】
以上就是jquery怎么让图片逐渐消失的详细内容。
