本文是一篇关于动画执行的帖子
首先 最用常的 hide show
$(function () {
$('#spinfo').click(function () {
if ($(this).text() == '隐藏') {
$('#divcontent').hide(2000, function () {
$('#spinfo').text('示显');
});
}
else {
$('#divcontent').show(2000, function () {
$('#spinfo').text('隐藏');
});
}
})
})
slide
$(function () {
$('#Button1').bind('click', function () {
$('img').slideUp(2000);
})
$('#Button2').bind('click', function () {
$('img').slideDown(2000);
})
$('#Button3').bind('click', function () {
$('img').slideToggle(2000);
})
})
fade
每日一道理
听,是谁的琴声,如此凄凉,低调的音,缓慢的节奏,仿佛正诉说着什么。音低调得略微有些抖动,听起来似乎心也有些抖动,我感觉到一种压抑的沉闷气息,是否已凝结在这空气中……
听,是谁的琴声,如此凄凉,低调的音,缓慢的节奏,仿佛正诉说着什么。音低调得略微有些抖动,听起来似乎心也有些抖动,我感觉到一种压抑的沉闷气息,是否已凝结在这空气中……
<script type="text/javascript">
$(function () {
$('#Button1').bind('click', function () {
$('img').fadeOut(2000, function () {
$('#Button1').val('哎,没了');
});
})
$('#Button2').bind('click', function () {
$('img').fadeIn(2000, function () {
$('#Button2').val('有了');
});
})
$('#Button3').bind('click', function () {
$('img').fadeTo(2000, 0.3, function () {
alert('动画执行终了');
});
})
})
</script>
animate
$(function () {
$('img').click(function () {
//$('img').css({width:'500px',height:'500px'});
//$('img').animate({width:'500px',height:'500px'}, 2000);
$(this).animate({ width: '500px' }, 2000).animate({ height: '500px' }, 2000).animate({ left: '+=100px' }, 2000).animate({ top: '-=100px' }, 2000);
})
$('#Button1').click(function () {
$('#spinfo').animate({ fontSize: '40px' }, 2000);
})
//止停动画
$('#Button2').click(function () {
//$('#spinfo').stop();
//当一个元素有一个动画队列时,止停的只是以后正在执行的动画,面后的动画还会继承执行
$('img').stop();
})
$('#Button3').click(function () {
$('img').delay(2000).hide(2000);
})
})
文章结束给大家分享下程序员的一些笑话语录: 一位程序员去海边游泳,由于水性不佳,游不回岸了,于是他挥着手臂,大声求.救:“F1,F1!”