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();