Rumah > Artikel > hujung hadapan web > jquery怎么让图片逐渐消失
jquery怎么让图片逐渐消失
- 青灯夜游asal
- 2022-04-21 14:50:022331semak imbas
逐渐消失的方法：1、用fadeOut()，只需设置从可见到消失的毫秒数即可，语法“$("img").fadeOut(毫秒数)”；2、用fadeTo()设置在指定毫秒数中透明度降为0即可，语法“$("img").fadeTo(毫秒数,0)”。
本教程操作环境：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前端视频】
Atas ialah kandungan terperinci jquery怎么让图片逐渐消失. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery怎么修改css类Artikel seterusnya：jquery怎么实现点击换图片