Jquery—动画api

Jquery一些动画特效api

//hide()，把元素隐藏，参数可为时间毫秒
$('#hide').on('click',function(){
   $('p').hide(1000);
});

//show()，把元素显示，参数可为时间毫秒
$('#show').on('click',function(){
    $('p').show(1000);
});

//toggle()，元素隐藏切换
$('#toggle').on('click',function(){
    $('p').toggle(1000);});
for(var i =0;i<5;i++){
    $('<div>').appendTo(document.body);
}
$('div').css({
    'width' : '50px',
    'height' : '50px',
    'float' : 'left',
    'background-color' : 'aqua',
    'margin-left' : '10px'
}).click(function(){
    $(this).hide(1000,function(){
        $(this).remove();
    })
});

//fadeIn()，fadeOut()，fadeToggle()，淡入和淡出，切换
$('#b1').click(function(){
    $('#d1').fadeIn(2000);
    $('#d2').fadeIn(2000);
    $('#d3').fadeIn(2000);
});
$('#b2').click(function(){
    $('#d1').fadeOut(2000);
    $('#d2').fadeOut(2000);
    $('#d3').fadeOut(2000);
});
$('#b3').on('click',function(){
    $('#d1').fadeToggle(2000);
    $('#d2').fadeToggle(2000);
    $('#d3').fadeToggle(2000);
});

//slideDown(),slideUp()，向上向下弹出
$('#d3').on('click',function(){
    $(this).slideToggle(1000);
});

自定义动画

//animate()，自定义动画，不能设置背景颜色，参数(css对象，执行的时间，过渡类型有(linear,swing)，回调)
$(this).animate({
    'width' : [200 ,'swing'],
},2000,'swing',function(){
    console.log('动画执行完毕了1');}).delay(2000); //设置延迟执行后面的项

//clearQueue()，清除队列中未执行的项
$(this).clearQueue();

//finish()，先停止当前动画，再直接执行到动画结束时的状态
$(this).finish();  

//stop()，停止当前项的操作
$(this).stop();