动画效果

一、基本

show显示隐藏的匹配元素
$(".show").click(function(){
                // $(".div").show()
                // $(".div").show("slow") normal fast
                $(".div").show(1000)
            })
hide隐藏显示的元素
 $(".hide").click(function(){
                $(".div").hide()
            })
toggle 用于确定显示/隐藏的开关
 $(".toggle").click(function(){
                $(".div").toggle()
            })

二、滑动

slideDown 以滑动方式显示隐藏的元素
$(".slideDown").click(function(){
                $(".div").slideDown()
            })
$("p").slideDown("slow");
slideUp   通过高度变化(向上减小)来动态地隐藏所有匹配的元素
$(".slideUp").click(function(){
                $(".div").slideUp()
slideToggle  通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
$(".slideToggle").click(function(){
                // $(".div").stop().slideToggle(3000) 删除所有排队的动画 在最后一此动画基础上,继续新动画
                // $(".div").finish().slideToggle(3000) 删除所有排队的动画  完成所有动画 开始新动画
            })


            $(".slideToggle").click(function(){
                $(".div").slideToggle(3000)
            })

三、淡入淡出

fadeIn通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
$(".fadeIn").click(function(){
                $(".div").fadeIn()
            })
fadeOut 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
 $(".fadeOut").click(function(){
                $(".div").fadeOut(3000)
            })
fadeToggle  通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

$(".fadeToggle").click(function(){
                $(".div").fadeToggle()
            })
fadeTo 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

  $(".fadeTo").click(function(){
                $(".div").fadeTo("normal",0.3)
            })

四、自定义动画

animate 用于创建自定义动画的函数
$(".animate").click(function(){
                // $(".div").animate({width:"400px"},1000)
                // $(".div").animate({width:"400px",height:"400px",opacity:0.3},1000)
                $(".div").animate({width:"+=40px",height:"+=40px",opacity:0.3},1000)
            })

 

 

           
上一篇:Vue中.sync的用法


下一篇:北京技能视频学习自动播放