动画效果

一、基本

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)
            })

 

 

           

标签：function,动画,效果,元素,slideToggle,div,click
来源： https://www.cnblogs.com/Nice0115/p/15543878.html