jquery_动画

// jquery_动画

// 代码1
// hide(),show(),toggle()
// slideUp(),slideDown()
// fadeOut(),fadeIn(),fadeToggle()
// 代码解说：jquery中常见的动画方法

// 代码2
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');
});
// 代码解说：animate()用于自定义动画

// 代码3
var div = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideDown(2000)
   .delay(1000)
   .animate({
       width: '256px',
       height: '256px'
   }, 2000)
   .delay(1000)
   .animate({
       width: '128px',
       height: '128px'
   }, 2000);
}
</script>
// 代码解说：串行动画，可实现复杂动画效果