abstract：總結(jié)：向右滑動的效果出不來，跟文檔一模一樣的也出不來，我明天再試試把。代碼：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .d1, .d2
總結(jié)：
向右滑動的效果出不來，跟文檔一模一樣的也出不來，我明天再試試把。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1, .d2, .d3, .d4{
width:100px; height:100px; background-color:#ffe411;
}
.box1{
width: 100px; height:100px; background: red;
}
button{
margin-bottom: 10px; border:none; width:100px;
}
.main{
width:150px; height:200px; float:left;
}
</style>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
// jQuery顯示/隱藏
// hide() 隱藏顯示的元素
// $(selector).hide(speed,callback)
// speed 元素隱藏的速度，默認(rèn)為零
// callback hide函數(shù)執(zhí)行后，要執(zhí)行的函數(shù)
// show() 顯示隱藏的元素
// $(selector).show(speed, callback)
// speed 元素顯示的速度，默認(rèn)為零
// callback show函數(shù)執(zhí)行后，要執(zhí)行的函數(shù)
// $(document).ready(function(){
// $('#btn1').click(function(){
// $('p').hide(1500);
// })
// $('#btn2').click(function(){
// $('p').show(1500);
// })
// })
// jQuery滑動
// jQuery是通過高度的變化 (向某個方向增大或縮小)來動態(tài)的顯示所匹配的元素
// slideDown(speed， callback)通過高度的變化，向下增大的動態(tài)效果 下滑效果
// speed: 下滑顯示過程的速度 英文值或者毫秒
// callback： 動畫完成時執(zhí)行的函數(shù)
// slideUp(speed, callback) 通過高度的變化，向上減小的動態(tài)效果 上滑效果
// speed：上滑顯示過程的速度 英文值或者毫秒
// callback：動畫完成時執(zhí)行的函數(shù)
// slideToggle(speed, callback); 通過高度的變化來切換元素的可見性
// speed：上滑隱藏/下滑顯示過程的速度 英文值或者毫秒
// callback： 動畫完成時執(zhí)行的函數(shù)
// $(document).ready(function(){
// $('.d1').hide();
// $('.btn1').click(function(){
// $('.d1').slideDown(1500);
// })
// $('.btn2').click(function(){
// $('.d2').slideUp(1500)
// })
// $('.btn3').click(function(){
// $('.d3').slideToggle(1000);
// })
// })
// jQuery 淡入 淡出
// fadeIn(speed, callback) 通過不透明度的變化來實現(xiàn)匹配到元素的淡入效果
// fadeOut(speed, callback) 通過不透明度的變化來實現(xiàn)匹配到元素的淡出效果
// fadeToggle(speed, callback)
// 通過不透明度的變化來開關(guān)所有匹配到元素的淡入淡出效果
// fadeTo(speed, opacity, callback)把所有匹配到的元素的不透明度以漸進(jìn)的方式調(diào)整到指定的不透明度
// speed：規(guī)定效果的時長
// callback：動畫完成時執(zhí)行的函數(shù)
// opacity： fadeTo方法中必須參數(shù)，控制淡入淡出的效果的不透明度（值介于0與1之間）
// $(document).ready(function(){
// $('.d1').hide();
// $('.btn1').click(function(){
// $('.d1').fadeIn(1500);
// })
// $('.btn2').click(function(){
// $('.d2').fadeOut(1500);
// }) //少打一個點 .
// $('.btn3').click(function(){
// $('.d3').fadeToggle(1500);
// })
// $('.btn4').click(function(){
// $('.d4').fadeTo(1500, 0.1);
// })
// })
// jQuery自定義動畫
// 使用 animate()方法創(chuàng)建自定義動畫
// 語法：$(selector).animate({params}, speed, callback);
// 必需的 params 參數(shù)定義形成動畫的 CSS 屬性
// 可選的 speed 參數(shù)規(guī)定效果的時長， 可?。?quot;slow"、"fast"、"nomal" 或 毫秒
// 可選的 callback 是動畫完成后所執(zhí)行的函數(shù)
// stop() 方法用于停止動畫或效果，在它們完成之前 該方法適用于所有 jQuery 效果函數(shù)，包括滑動、淡入淡出和自定義動畫
// 語法：$(selector).stop(stopAll, goToEnd);
// 可選的參數(shù) stopAll 規(guī)定是否應(yīng)該清除動畫隊列。 默認(rèn)是 false 僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行
// 可選的參數(shù) goToEnd 規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是 false
// 默認(rèn)情況下 stop() 會清楚再被選元素上指定的當(dāng)前動畫
$(document).ready(function(){
// $('.btn1').click(function(){
// $('p').animate({fontSize:'40px'}, 1500);
// })
// $('.btn2').click(function(){
// $("div").animate({left:"100px"}, 1500);
// $('div').animate({
// left:'400px', //left 谷歌瀏覽器測試不能實現(xiàn)
// opacity: '0.3',
// width:'400px',
// height:'400px'
// width:'toggle'
// }, 1500);
// })
$('#right').click(function(){
$('.box1').animate({left:'500px'}, 3000);//還是實現(xiàn)不了，我醉了。
$('.box1').animate({fontSize:'30px'}, 500);//這個就可以實現(xiàn)，我也是福
})
$('#stop').click(function(){
$('.box1').stop(true, true);
})
})
</script>
</head>
<body>
<!-- <button id="btn1">點擊隱藏</button>
<button id="btn2">點擊顯示</button>
<p>我是wjh,xxoo</p>
<p>me love you</p> -->
<!-- <button class="btn1">下滑</button>
<div class="d1"></div>
<button class="btn2">上滑</button>
<div class="d2"></div>
<button class="btn3">切換</button>
<div class="d3"></div> -->
<!-- <div class="main">
<button class="btn1">淡入</button>
<div class="d1"></div>
</div>
<div class="main">
<button class="btn2">淡出</button>
<div class="d2"></div>
</div>
<div class="main">
<button class="btn3">切換</button>
<div class="d3"></div>
</div>
<div class="main">
<button class="btn4">漸變到指定值</button>
<div class="d4"></div>
</div> -->
<!-- <button class="btn1">點擊</button>
<p>我是一個小可愛，我來自神都洛陽。</p>
<button class="btn2">點擊</button>
<div></div> -->
<div>
<button id="right">右移</button>
<button id="sopt">停止</button>
<div class="box1">php中文網(wǎng)</div>
</div>
</body>
</html>
Correcting teacher：查無此人Correction time：2019-02-15 09:17:59
Teacher's summary：效果都是事件觸發(fā)，看看事件寫的對不對。。剛開始學(xué)習(xí)，會碰到很多問題，比如一個字母打錯，也會不執(zhí)行。仔細(xì)檢查，繼續(xù)加油。