JQuery 实现图片滑动收起与隐藏

最新推荐文章于 2020-05-19 13:10:58 发布

Mr_jinhua

最新推荐文章于 2020-05-19 13:10:58 发布

阅读量676

点赞数

分类专栏： JQuery案例总结

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

版权

JQuery案例总结专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的图片滑动效果示例。通过三个按钮分别控制图片的滑下、滑上及切换效果，并设置了3秒的动画时长。此示例适用于初学者学习jQuery的动画功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jq183.js"></script>
</head>
<body>
<input type="button" id="down" value="slideDown">
<input type="button" id="up" value="slideUp">
<input type="button" id="toggle" value="slideToggle">
<br>
<hr>
<img src="./flower1.jpg" alt="" id="re">
</body>
<script>
    //给指定按钮绑定单击事件 实现图片滑动收起和隐藏
    $('#down').click(function(){
        $('#re').slideDown(3000,function(){
            alert('我来啦！');
        });
    })
    $('#up').click(function(){
        $('#re').slideUp(3000,function(){
            alert('我走啦！');
        });
    })

    $('#toggle').click(function(){
        $('#re').slideToggle(3000,function(){
            alert('biubiubiu');
        });
    })
</script>
</html>