展现和隐藏
-
.hide([duration ] [,easing ] [,complete ])
用于隐藏元素，没有参数的时候等同于直接设置display属性。
$('.target').hide();
//等同于 $('.target').css('display', 'none')
//原生JS写法node.style.display = 'none'
-
.show( [duration ] [, easing ] [, complete ] )
用于显示元素，用法和hide类似.
$('xxx').show()
//原生JS写法node.style.display = 'block'
-
toggle( [duration ] [, easing ] [, complete ] )
事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置
用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似.。如果这个元素以前是隐藏的，那么点击就是展示，如果是展示的，点击就会隐藏。 - 相关参数含义：
1. duration：动画持续了多久
$('xxx').hide(1000) //用了1秒的时间去隐藏
2. easing:表示过渡使用哪种缓动函数，jQuery自身提供了'linear'和'swing'
//缓动函数就是指在变化的过程中是先快后面还是先慢后快等等，liner就是一个线性的变化
3. complete:在动画完成时执行的函数,是一个回调函数
$('xxx').hide(1000,function(){
console.log('hide')
})
//动画执行完之后才会console.log出hide.
如果元素之前已经设置了display的值，那么变化的最终结果也会是这个设置的值，不会更改。比如div元素设置了display:inline-block，那么它hide之后再show的时候，最后的display还是inline-block。与原生Js比较，jQuery可以记住它原来的css属性。
<div class = "box" style = "display: inline-block">hello</div>
<button id = "btn-box1">hide</button>
<button id = "btn-box2">show</button>
<script>
$('#btn-box1').on('click',function(){
$('.box').hide(5000)
})
$('#btn-box2').on('click',function(){
$('.box').show(5000)
})
</script>
-
.fadeIn( [duration ] [, easing ] [, complete ] )
通过淡入的方式显示匹配元素，参数含义和上面相同 -
.fadeOut( [duration ] [, easing ] [, complete ] )
通过淡出的方式隐藏匹配元素 -
.fadeTo( duration, opacity [, easing ] [, complete ] )
调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果 -
.fadeToggle( [duration ] [, easing ] [, complete ] )
通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。
滑动
-
.slideDown( [duration ] [, easing ] [, complete ] )
用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式 -
.slideUp( [duration ] [, easing ] [, complete ] )
用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。 -
.slideToggle( [duration ] [, easing ] [, complete ] )
用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。
如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 - slidedown,slideup的变化是有一个拉伸的效果，而hide()和show()的变化是整体的变大变小。
自定义动画
-
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一个CSS属性和值的对象，动画将根据这组对象移动。
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
- 没有动画的时候，我们可以使用css设置元素的样式，但是如果想把这个样式变化变成连贯的，那么就要使用animate，设置这个参数后，就会从初始状态变成设置的状态，这个过程是渐变的，不是一下子就变成的。
- 写了动画的时候，不一定就会产生效果，也要和css相对应，例如想要实现移动效果，设置了top和left的值，要在原元素上添加position：relative，否则就算是设置了top或者left也不会有移动效果。
//多个动画的代码
$('#btn').on('click',function(){
$div3.animate({ },function(){
//function 是一个回调，相当于动画完成之后要做的事情
$div3.animate({ },function(){
....
})
})
})
/*就是第一个动画完成之后，执行第二个动画，第二个动画执行完成之后，
执行第三个动画。。。。有几个动画就要嵌套几次。但是这个嵌套次数太多，代码不是很好，
所以animate就做了一个封装，代码如下：*/
//jQuery的链式调用
$div3.animate({ }).animate({ }).animate({ }).....
//第二种方案
$div3.animate({ });
$div3.animate({ });
....
$div3.animate({},function(){
...
})
//第三种优化方案：
//把所有的样式放到一个数组里面，用animate遍历这个数组
var actions = [
{width: 80,height: 80,left: 0,top:0},
{left: '200px'},
......
]
actions.forEach(function(action,idx){
$div3.animate(action)
})
jQuery的链式调用
$div.hide().show().css()
因为div。所以还可以继续.show()等。
等价于
$div.hide()
.show()
.stop()和.finish()的区别
- .finish：停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。
- .stop( [clearQueue ] [, jumpToEnd ] )
停止当前正在运行的动画,若果当前队列没有执行完，点击stop，会立刻停止当前队列的执行。
<body>
<button id="btn1">start</button>
<button id="btn2">step+50</button>
<button id="btn3">step-50</button>
<button id="btn4">auto</button>
<button id="btn5">reset</button>
<button id="btn6">stop(false,false)</button>
<button id="btn7">stop(true,false)</button>
<button id="btn8">stop(true,true)</button>
<button id="btn9">finish</button>
<div class="container">
<div class="box"></div>
</div>
<script>
$('#btn1').click(function(){
$('.box').animate({
left: '100px'
}, 1000)
})
$('#btn2').click(function(){
$('.box').animate({
left: '+=50'
}, 1000)
})
$('#btn3').click(function(){
$('.box').animate({
left: '-=50'
}, 1000)
})
$('#btn4').click(function(){
$('.box').animate({
left: '100px'
}, 1000)
$('.box').animate({
left: '100px',
top: '100px'
}, 1000)
$('.box').animate({
left: '0',
top: '100px'
}, 1000)
$('.box').animate({
left: '0',
top: '0'
}, 1000)
})
$('#btn5').click(function(){
$('.box').animate({
left: 0,
top: 0
}, 1000)
})
$('#btn6').click(function(){
//停止当前动画
$('.box').stop()
})
$('#btn7').click(function(){
//停止当前动画，并清除未执行的动画队列
$('.box').stop(true, false)
})
$('#btn8').click(function(){
//停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
$('.box').stop(true, true)
})
$('#btn9').click(function(){
//停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
$('.box').finish()
})
</script>
.clearQueue
清除动画队列中未执行的动画。
slideToggle()
$('.ct .item').on('click',function(){
$(this).find('p').slideToggle()
})
//当点击元素的时候，从当前元素里面找到p.
//若.item内的P元素的内容展示出来了，点击事件则会隐藏内容，若没有展现出来，点击事件则会展现内容。
如果想实现点击某一个p的时候，内容展现出来，但是其他p的内容要隐藏起来。或者点击P1的时候，p1的内容展现，但是点击p2的时候，P2d的内容展现，但是p1的消失，也就是p2的兄弟节点的内容都消息
$('.ct .item').on('click',function(){
$(this).find('p').sildeDown()
//兄弟节点都去掉
$(this).siblings().find('p').slideUp()
})
网友评论