JQery图片淡入淡出效果案例

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

Mr_jinhua

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

阅读量473

点赞数

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

本文链接：https://blog.csdn.net/weixin_38849871/article/details/77453597

版权

11 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

<!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>

关注

专栏目录