jQuery 实现简单的动画

目录

jQuery 实现简单的动画

1、显示/隐藏

2、向上收缩/向下展开

3、淡入/淡出

4、自定义动画

---

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