JQery图片淡入淡出效果案例

图片淡入淡出效果

最新推荐文章于 2021-11-22 02:59:49 发布

Mr_jinhua

最新推荐文章于 2021-11-22 02:59:49 发布

阅读量516

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript案例总结 JQuery案例总结

本文链接：https://blog.youkuaiyun.com/weixin_38849871/article/details/77453597

11 篇文章

订阅专栏

8 篇文章

订阅专栏

本文介绍了一个简单的网页示例，使用jQuery实现图片的淡入和淡出效果。通过两个按钮控制图片显示与隐藏的过程，并伴有动画过渡。适用于初学者了解jQuery中淡入淡出动画的基本用法。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图片淡入淡出</title>

    <script src="jq183.js"></script>

</head>

<body>

<input type="button" value="fadeIn" id="in">

<input type="button" value="fadeOut" id="out">

<br>

<hr>

<img src="./flower2.jpg" alt="" id="re">

</body>

<script>

    //给指定按钮绑定单击事件 当 点击时 图片3 秒内淡淡的进入 并执行后边的函数

    $('#in').click(function(){

       $('#re').fadeIn(3000,function () {

           alert('我来啦！')

       }) ;

});

    //给指定按钮绑定单击事件 当 点击时 图片3 秒内淡离开 并执行后边的函数

    $('#out').click(function(){

        $('#re').fadeOut(3000,function () {

            alert('我走啦！')

        }) ;

});

</script>

</html>