abstrak：<div class="clear"></div> <h3>jquery動畫效果</h3> <style> h3{margin-bottom: 20px;} .jq1,.jq2,.jq3,.jq4{width: 150px;height: 150px;float: le

<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(){
// 當(dāng)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">

Guru membetulkan：天蓬老師Masa pembetulan：2018-11-18 15:16:25
Rumusan guru：總體邏輯正確，不過代碼中使用jquery操作元素，卻沒有看到引用的jquery。