1: div左右平移并变色
$('#btn1').click(function () {
var _this = this;
$('.div1:eq(0)').animate({ top: '100', left: '100' }, 1000, function () {
$(this).css('background-color', 'green');
$(_this).attr('disabled', 'disabled');
});
});
2:下拉列表
$('.div1').mouseover(function () {
$(this).find('.div2:eq(0)').stop().animate({ height: '300px' }, 500);
}).mouseout(function () {
$(this).find('.div2:eq(0)').stop().animate({ height: '0px' }, 500);
});
3:进度条
window.setInterval(function () {
if (txt < 15) txt = a;
else if (txt < 70) txt = b;
else txt = c;
$('.jdt_tiao').animate({ txt + '%' }, 500);
}, 1500);
4: 点开展示所有文本
$('.div1').click(function () {
var _this = this;
if (_this.offsetHeight <= 100)
$(_this).animate({ height: $(_this).find('.div2:eq(0)').get(0).offsetHeight + 20 }, 500);
else
$(_this).animate({ height: '100' }, 500);
});
5:弹出效果
$('#btn1').click(function () {
$('#div1').animate({ top: '100' }, 500, function () {
$('#div1').animate({ top: '80' }, 200, function () {
$('#div1').animate({ top: '100' }, 200, function () {
});
});
});
});
$('#div1').click(function () {
$('#div1').animate({ top: '120' }, 200, function () {
$('#div1').animate({ top: '-300' }, 500, function () {
});
});
});