jQuery系列---【jQuery中的动画】

显示与隐藏

show(),hide(),toggle()

// jQuery对象.show(speed, easing, callback): 显示
// jQuery对象.hide(speed, easing, callback): 隐藏
// jQuery对象.toggle(speed, easing, callback): 显示/隐藏切换
// speed: 动画时间 slow(600ms) normal(400ms) fast(200ms)
// easing: 运动曲率 linear(线性的) swing(开头结尾慢,中间快)
// callback: 回调函数
$('button').eq(0).click(function () {
    $('div').show();
});
$('button').eq(1).click(function () {
    $('div').hide();
});
$('button').eq(2).click(function () {
    $('div').toggle();
});
$('button').eq(3).click(function () {
    $('div').show(1000, function () {
        console.log('show--done');
    });
});
$('button').eq(4).click(function () {
    $('div').hide(1000, function () {
        console.log('hide--done');
    });
});
$('button').eq(5).click(function () {
    $('div').toggle(1000, function () {
        console.log('toggle--done');
    });
});

改变透明度

fadeIn(), fadeOut(), fadeToggle(), fadeTo()

// jQuery对象.fadeIn(speed, callback): 淡入
// jQuery对象.fadeOut(speed, callback): 淡出
// jQuery对象.fadeToggle(speed, callback): 淡入/淡出切换
// jQuery对象.fadeTo(speed, 透明度, callback): 淡入到具体的透明度
$('button').eq(0).click(function () {
    $('div').fadeIn();
});
$('button').eq(1).click(function () {
    $('div').fadeOut();
});
$('button').eq(2).click(function () {
    $('div').fadeToggle();
});
$('button').eq(3).click(function () {
    $('div').fadeIn(1000);
});
$('button').eq(4).click(function () {
    $('div').fadeOut(1000);
});
$('button').eq(5).click(function () {
    $('div').fadeToggle(1000, function () {
        console.log('toggle--done');
    });
});

$('button').eq(6).click(function () {
    $('div').fadeTo(1000, 0.5, function () {
        console.log('fadeTo--done');
    });
});

改变高度

slideDown(),slideUp,slideToggle()

// jQuery对象.slideDown(speed, callback): 下滑展开
// jQuery对象.slideUp(speed, callback): 上滑收起
// jQuery对象.slideToggle(speed, callback): 下滑展开/上滑收起切换
$('button').eq(0).click(function () {
    $('div').slideDown();
});
$('button').eq(1).click(function () {
    $('div').slideUp();
});
$('button').eq(2).click(function () {
    $('div').slideToggle();
});
$('button').eq(3).click(function () {
    $('div').slideDown(1000);
});
$('button').eq(4).click(function () {
    $('div').slideUp(1000);
});
$('button').eq(5).click(function () {
    $('div').slideToggle(1000, function () {
        console.log('toggle--done');
    });
});

自定义运动

animate()

// jQuery对象.animate(终点json, 动画时间, 运动曲率, 回调函数)
$('div').click(function () {
    // 单一属性运动
    // $('div').animate({ left: 500 });
    // 可以指定动画时间
    // $('div').animate({ left: 500 }, 2000);
    // 添加回调函数
    // $('div').animate({ left: 500 }, 2000, function () {
    //     $('div').css('background', 'orange');
    //     console.log('animate--done');
    // });

    // 加等
    // $('div').animate({ left: '+=200' }, 2000);

    // 多个属性同时运动
    // $('div').animate({ left: 500, top: 100 }, 2000);

    // 链式动画
    // $('div')
    //     .animate({ left: 500 }, 2000)
    //     .animate({ top: 500 }, 2000)
    //     .animate({ left: 0 }, 2000)
    //     .animate({ top: 0 }, 2000);

    // 对同一元素的不同动画会排队,不同元素互不影响
    // $('div').animate({ left: 500 }, 2000);
    // $('div').animate({ top: 500 }, 2000);
});

延迟动画

jQuery对象.delay(时间); 即动画停顿多长时间，单位毫秒

$('#box').click(function () {
$(this)
.animate({ width: 300 }, 3000)
.delay(3000) // 延迟动画
.animate({ height: 300 }, 3000);
});

停止运动

jQuery对象.stop(clearQueue, gotoEnd);

​ clearQueue：代表是否要清空未执行完的动画队列，默认false。

​ gotoEnd：代表是否直接将正在执行的动画跳转到末状态，默认false。

jQuery对象.finish(); 所有动画都到未状态

var btn = $('button');
var box = $('#box');
box.click(function () {
$(this)
.animate({ width: 300 }, 3000)
.animate({ height: 300 }, 3000);
});
// 停止
btn.click(function () {
// box.stop(); // 停止当前的运动，继续执行后续的运动
// box.stop(true); // 停止当前的运动，清空后续运动
// box.stop(true, true); // 当前动画跳转到未状态，清空后续的动画
box.finish(); // 所有的动画到未状态
});