jQuery基础动画

1.jQuery动画效果,隐藏和显示。

有两个方法分别是:slideDow()       toggleDoe()      

语法:$(selector).hide(speed.callback)

语法:$(selector).show(speed.callback)

callback参数:是隐藏或显示完成后执行的函数名称。 

语法:$(selector).toggle(speed.callback)      点击显示/隐藏

<body>

<input type="button" id="btn1" value="隐藏">

<input type="button" id="btn2" value="显示">

<input type="button" id="btn3" value="隐藏/显示">
<input type="button" id="btn4" value="上拉">
<input type="button" id="btn5" value="下拉">
<input type="button" id="btn6" value="上拉/下拉">

<input type="button" id="btn7" value="自定义">

<div id="box"></div>

  </body>
<script src="jquery.js"></script>
<script>
$("#btn1").click(function(){                                                                                                                                              $("#box").hide(200,"liner",function(){ alert("结束") 
            }) )                                                       
 $("#btn2").click(function(){                                                                                                                                                $("#box").show(200)
               })                                                                                                                   
    $("#btn3").click(function(){                                                                                                                                              $("#box").toggle(200) 
             }) 

</script>

callback参数:是隐藏或显示完成后执行的函数名称。 

2.Jquery滑动和动画

两个方法:slideDow()       toggleDoe()

 $("#btn4").click(function(){     
              $("#box").slideUP(200)
            })
$("#btn5").click(function(){   
            $("#box").slideDown(200)   
              })   
$("#btn6").click(function(){   
             $("#box").slideToggle(200)   
            }) 

3.JQuery动画效果,动画

animate()方法用于创建自定义的动画。

 语法:$(selector),animate({params},speed,callback)

$("#btn7").click(function(){

    $("#box").animate({
           width:0,
            height:0,
      })
        },200,function(){
       console.log("结束"
       })

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第1章 动画基础隐藏和显示 1-1 jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置c...
    mo默22阅读 835评论 0 8
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 712评论 0 3
  • jQuery 安装 把 jQuery 添加到您的网页 如需使用 jQuery,您需要下载 jQuery 库(会在下...
    Clover园阅读 345评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,708评论 0 3
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,490评论 0 2

友情链接更多精彩内容