[JavaScript基础]学习④⑤--动画

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434500456006abd6381dc3bb439d932cb895b62d9eee000

show / hide

var div = $('#test-show-hide');
div.hide(3000); // 在3秒钟内逐渐消失

示例代码

    
        
        
        
        
    

    

        


        Button
    

var div = $('#test-show-hide');
div.show('slow'); // 在0.6秒钟内逐渐显示

slideUp / slideDown

var div = $('#test-slide');
div.slideUp(3000); // 在3秒钟内逐渐向上消失

fadeIn / fadeOut

var div = $('#test-fade');
div.fadeOut('slow'); // 在0.6秒内淡出

自定义动画 animate()

var div = $('#test-animate');
div.animate({
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000); // 在3秒钟内CSS过渡到设定值

var div = $('#test-animate');
div.animate({
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000, function () {
    console.log('动画已结束');
    // 恢复至初始状态:
    $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

串行动画 delay()

var div = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
div..hide().
  slideDown(2000)
   .delay(1000)
   .animate({
       width: '256px',
       height: '256px'
   }, 2000)
   .delay(1000)
   .animate({
       width: '128px',
       height: '128px'
   }, 2000);
}

练习

    
        
        
        
        
    

    

        

            

                

                    
Name
                    
Email
                    
Address
                    
Status
                
            
            

            
        
        Add
        Remove