jQuery如何实现简单的动画效果

这篇文章主要讲解了“jQuery如何实现简单的动画效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jQuery如何实现简单的动画效果”吧！

公司主营业务：成都做网站、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出宝鸡免费做网站回馈大家。

jQuery 实现简单的动画

1、显示/隐藏

(1)显示：

show(speed,[callback])

speed:效果时长。可取的值：slow、fast、毫秒数

callback:过渡完成后，所执行的方法名称

(2)隐藏：

hide(speed,[callback])

(3)交替：

toggle(speed,[callback]),

若'显示'则'隐藏';

若'隐藏'则显示

示例如下：

//搭建结构
 <button id="btn_show">显示图片</button>
        <button id="btn_hide">隐藏图片</button>
        <button id="btn_toggle">交替显示隐藏</button>
    <img src="../素材/im2.jpg" alt="" width="200" height="200" id="img1"> 
  
<script>
$('#btn_show').bind('click',function(){
                $('#img1').show(3000);  // 3秒之内显示
            })
             $('#btn_hide').bind('click', function () {
                $('#img1').hide(1000);  // 1秒之内隐藏
            })
             $('#btn_toggle').bind('click', function () {
                $('#img1').toggle();  // 显示或隐藏
            })
</script>

2、向上收缩/向下展开

(1)收缩：

slidUp(speed,[callback])

(2)展开：

slidDown(speed,[callback])

(3)交替：

slidToggle(speed,[callback])

示例如下：

 $('#btn_up').bind('click',function(){
                $('#img2').slideUp();  //展开
            })
             $('#btn_down').bind('click', function () {
                $('#img2').slideDown(); //收缩
            })
             $('#btn_slide').bind('click', function () {
                $('#img2').slideToggle();  //收缩展开交替
            })

输出结果：

3、淡入/淡出

(1)淡入：

fadeIn(speed,[callback])

(2)淡出：

fadeOut(speed,[callback])

(3)淡入淡出交替：

fadeToggle(speed,[callback])

示例如下：

 $('#btn_fadeIn').bind('click', function () {
                $('#img3').fadeIn();   //淡入
            })
            $('#btn_fadeOut').bind('click', function () {
                $('#img3').fadeOut();  //淡出
            })
            $('#btn_fade').bind('click', function () {
                $('#img3').fadeToggle(2000);  //淡入淡出交替
            })

4、自定义动画

$(selector).animate(params,[speed],[easing],[fn])

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

示例如下：

$(function(){
            $('button').click(function(){
                $('.bt').animate({
                    left:200,
                    top:150,
                    opacity:0.4
                },1000)
            })
        })

输出结果：

感谢各位的阅读，以上就是“jQuery如何实现简单的动画效果”的内容了，经过本文的学习后，相信大家对jQuery如何实现简单的动画效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

网页题目：jQuery如何实现简单的动画效果
文章起源：https://www.cdcxhl.com/article14/jhdpde.html

成都网站建设公司_创新互联，为您提供做网站、网站排名、小程序开发、网站制作、App设计、云服务器

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联