jQuery动画
- 默认时间有'slow','fast'等。
基础
.hide([duration ] [,easing ] [,complete ])
- 用于隐藏元素，没有参数的时候等同于直接设置display 属性
看几个例子
$('. target').hide();
//等同于$(' .target).css( display', 'none')
$('#book').hide(300，function() {
alert( 'Animation complete.');
})
.show( [duration ] [, easing ] [, complete ] )
- 用于显示元素，用法和hide类似，在.hide()和.show()的参数设置为400时，代表有400秒的效果延时，也可以说是效果过程展示。设置一些别的参数（如：'admin'等 ），可以使其按照默认的时间实现展示的消失。还有一些对应时间的参数。
.toggle( [duration ] [, easing] [, complete ])
- 用来切换元素的隐藏、显示，类似于toggleClass ，用法和show 、hide 类似（事件处理套件也有 一个名为.toggle0方法。哪一个被调用取决于传递的参数的设置）
渐变
- .fadeIn()和.fadeOut是一种背景的渐隐，背景的虚化也就是由透明度1-0的过程，在不设置传参数的时候，按照默认时间渐隐到消失或渐隐出现，可以设置时间来控制该阶段的渐隐和渐显效果。
.fadeln( [duration ] [, easing ] [, complete ])
通过淡入的方式显示匹配元素，参数含义和上面相同。
.fadeOut( [duration ] [, easing ] [, complete ] )
通过淡出的方式隐藏匹配元素
.fadeTo( duration, opacity [, easing ] [, complete ])
调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
$( '#book'). fadeTol('slow', 0.5, function() {
// Animation complete.
});
.fadeToggle( [duration ] [, easing ] [, complete ] )
- 通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none，所以元素不再影响页面的布局。
$("button:first"). click( function() {
$("p: first"). fadeToggle("slow", "linear");
});
滑动
.slideDown()和.slideUp也是展示和隐藏的效果，不过.slideDown()和.slideUp是上拉和下拉的效果，上拉隐藏，下拉展示。
.slideDown( [duration ] [, easing ] [, complete ] )
- 用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
$( '#book' ).slideDown( 'slow', function() {
// Animation complete.
});
.slideUp( [duration ] [, easing ] [, complete ])
- 用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display样式属性被设置为none，以确保该元素不再影响页面布局。
$( '#book').slideUpl'slow', function() {
// An imation complete.
});
.slideToggle( [duration ] [, easing] [, complete ])
- 用滑动动画显示或隐藏一个匹配元索，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。dlsplay属性值保存在Query的数据缓存中，所以dleplay可以方便以后可以恢复到其初始值如果一个元素的display属性值为nline,然后是隐藏和显示，这个元素将再次显示Inline。当一个隐藏动画后，高度值达到0的时候，dlsplay 样式属性被设置为none,以确保该元素不再影响页面布局。
$( '#clickine' 1.cl1ekc function() (
${ '#boak'),slldeToggle('slow'，function() {
// An1mst1on complete.
});
});
关于上述方法的参数：
- 上述方法三个参数，第一位效果过程时间的设置，第二个参数是效果展示过程是否均匀的设置，第三个参数是回调函数的设置。对于后面的函数，效果展示过程和函数的执行时异步的（动画队列）。如果需要在效果展示完成之后再执行函数，则需要使用回调函数。回调函数如下：
$('#btn- box1').on('click', function(){
$(' .box')。show(1400, function(){
console. log('show' )
})
}
动画队列
关于动画队列，在执行下述例子的时候，所有的动画的方法被按顺序放入队列中，然后执行其它的效果，最后按顺序执行动画队列中的动画效果。
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('动画执行完毕')
})
})
})
})
})
})//连续的动画，但是较为难看，也容易出错。
$box.hide(1000)
.show(1000)
.fadeOut(1000)
.fadeIn(1000)
.slideUp(1000)
.slideDown(function(){
console.log('真的完毕了');
});
console.log('动画完毕了吗');
});
输出结果：先输出"动画结束了吗"，然后执行动画效果，最后输出"真的完毕了"
关于动画队列的的例子：
<button id="btn-box1">show</button>
<button id="btn-box2">hide</button>
<button id="btn-box3">fadeIn</button>
<button id="btn-box4">fadeOut</button>
<button id="btn-box5">slideDown</button>
<button id="btn-box6">slideUp</button>
<button id="action"> 回调</button>
<div class="container">
<div class="box">
hello
</div>
</div>
<div class="ct">
<ul>
<li class="item">
<h3>标题1</h3>
<p>内容1</p>
</li>
<li class="item">
<h3>标题2</h3>
<p>内容2</p>
</li>
<li class="item">
<h3>标3</h3>
<p>内容3</p>
</li>
<li class="item">
<h3>标题4</h3>
<p>内容4</p>
</li>
</ul>
</div>
$('#btn-box1').on('click', function(){
$('.box').show('normal');
});
$('#btn-box2').on('click', function(){
$('.box').hide('admin');
});
$('#btn-box3').on('click', function(){
$('.box').fadeIn();
});
$('#btn-box4').on('click', function(){
$('.box').fadeOut();
});
$('#btn-box5').on('click', function(){
$('.box').slideDown();
});
$('#btn-box6').on('click', function(){
$('.box').slideUp();
});
$('#action').on('click', function(){
var $box = $('.box');
/*
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('动画执行完毕')
})
})
})
})
})
})//连续的动画
*/
$box.hide(1000)
.show(1000)
.fadeOut(1000)
.fadeIn(1000)
.slideUp(1000)
.slideDown(function(){
console.log('真的完毕了');
});
console.log('动画完毕了吗');
});
$('.ct .item').on('click', function(){
$(this).find('p').slideDown();
$(this).siblings().find('p').slideUp();
});
// $('.ct .item').on('mouseleave', function(){
// $(this).find('p').slideUp(100);
// });
自定义动画
上面几个简单的动画不能满足需求的时候, jquery提供 了自定义动画行为的方法
.animate( properties [, duration ] [, easing ] [, complete ] )
- properties是一个CSS属 性和值的对象,动画将根据这组对象移动。该方法和jQuery的.css()方法类似但是.css()方法是跳跃式的，而该方法是有一个展示的过程的也就是有个渐变的过程（渐变过程需要设置的样式本身可以渐变的也就是元素本身可渐变的，例如设置，透明度事，透明度可以由1向0渐变；而设置display为none时，是无法渐变的）。
使用该自定义动画效果时，需要遵循CSS的使用原则。
$( '#clickme'). click( function() {
$( ' #book' ). animate({
opacity: 0.25,//透明度变为0.25
left: '+=50',//left在原来的基础上增加50
height: ' toggle '//height设为toggle
}，5000， function() {
// Animation complete.
});
});
第一个参数为效果的集合，第二个参数为实现效果使用的时间，第三个参数表示过程是否均匀展示，第四个参数为回调函数。
.clearQueue
- 清除动画队列中未执行的动画
.finish
- 停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。
.stop( [clearQueue ] [, jumpToEnd])
- 停止当前正在运行的动画，根据参数展示后续效果。
- clearQueue(default: false)//表示是否清除队列
- jumpToEnd(default: false)//表示是否跳到动画队列最后的一个任务执行。
关于.stop()的参数：
- 当两个参数都为flase时：
不清除任务队列，终止当前队列跳过动画队列中间的任务直接执行队列中最后的任务。 - 当参数为false,true时：
跳到当前任务的最后一帧，执行动动画队列的下一个任务。 - 当参数为true,false时：
不清除任务队列，终止所有动画队列中的任务，动画直接停在触发该方法的地方。 - 当参数都为true的时：
清除任务队列，跳到当前任务最后一帧，然后停止动画。
<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>
.container{
position: relative;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background: red;
opacity: 1;
}
$('#btn1').click(function(){
$('.box').animate({
left: '100px',
top: 80 //可以不加引号和px
}, 1000);
});
$('#btn2').click(function(){
$('.box').animate({
left: '+=50'
}, 1000);
});
$('#btn3').click(function(){
$('.box').animate({
left: '-=50'
}, 1000);
});
/*
var frames = [{},{},{},{}]
frames.forEach(frame=>{
$('.box').animate(frame, 400)
})
*/
$('#btn4').click(function(){
$('.box').animate({
left: '300px'
}, 3000);
$('.box').animate({
left: '300px',
top: '300px'
}, 3000);
$('.box').animate({
left: '0',
top: '300px'
}, 3000);
$('.box').animate({
left: '0',
top: '00'
}, 3000);
});
$('#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();
});
实现跳过正在执行的任务队列，执行新的任务队列：
$(' #btn10') .click(function(){
$(' .box') . animate({
left: 100,
top: 0
}). finish() . animate({
Left: 100,
top: 300
})
})
网友评论