<div class="clear"></div>
<h3>jquery动画效果</h3>
<style>
h3{margin-bottom: 20px;}
.jq1,.jq2,.jq3,.jq4{width: 150px;height: 150px;float: left;margin-right: 20px;background: #ea5404;margin-bottom: 20px;}
#dianji3,#dianji,#dianji2,#dianji4,#dianji5,#dianji6,#dianji7,#dianji8{border: 0px;width: 70px;height: 50px;color: brown;}
.clear{clear:both;}
</style>
<script>
$(document).ready(function(){
$('#dianji').click(function(){
$('.jq1').show(2000,"swing",function(){
$('.jq1').css('background','#ccc');
})
})
$('#dianji2').click(function(){
$('.jq1').hide("slow",function(){
$('#dianji2').css({'background':'green'});
})
})
$('#dianji4').click(function(){
$('.jq3').slideUp("slow",function(){
console.log("slide UP!!!");
})
})
$('#dianji5').click(function(){
$('.jq3').slideDown(2000,function(){
console.log("Slide Down!!");
})
})
$('#dianji3').click(function(){
$('.jq3').slideToggle("slow",function(){
console.log("this is SlideToggle!!");
})
})
$('#dianji6').click(function(){
$('.jq4').css('position','relative');
$('.jq4').animate({'left':'+200px','opacity':'0.5','fontSize':'30px'},"slow",function(){
console.log("this is animate!");
})
})
$('#dianji7').click(function(){
$('.jq4').stop();
})
$('#dianji8').click(function(){
$('html,body').animate({scrollTop:0},'slow');
console.log($('#dianji8').length);
$(window).scroll(function(){
// 当window距离顶部小于300，按钮淡出
if($(this).scrollTop()<300){
$('#dianji8').fadeOut('slow');
}
else{
$('#dianji8').fadeIn('slow');
}
})
})
})
</script>
<div class="jq1">show</div>
<div class="jq2"></div>
<div class="jq3">slideup<br>slidedown<br>slidetoggle</div>
<div class="jq4">animate</div>
<br>
<div class="clear"></div>
<input type="button" id='dianji' value="显示">
<input type="button" id='dianji2' value="隐藏">
<input type="button" id='dianji4' value="向上滑动">
<input type="button" id='dianji5' value="向下滑动">
<input type="button" id='dianji3' value="Toggle">
<input type="button" id='dianji6' value="Animate">
<input type="button" id='dianji7' value="Stop">
<input type="button" id='dianji8' value="ScrollTop">
