摘要：jquery的動(dòng)畫(huà) 在網(wǎng)頁(yè)和網(wǎng)站中我們都會(huì)用到此類的方法到程序當(dāng)中去 所以我還得晴加練習(xí)。!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="te
jquery的動(dòng)畫(huà) 在網(wǎng)頁(yè)和網(wǎng)站中我們都會(huì)用到此類的方法到程序當(dāng)中去 所以我還得晴加練習(xí)。
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .red{color: pink}
.oks{font-weight: bold;font-size: 35px;} */
div{width: 150px;height: 150px;position: absolute;background: pink;}
#suo{background-color: pink;}
</style>
<script type="text/javascript"src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
// jQuery中我們使用 animate()方法創(chuàng)建自定義的動(dòng)畫(huà)
// 語(yǔ)法:$(selector).animate({params},speed,fn);
// 必需的 params 參數(shù)定義形成動(dòng)畫(huà)的 CSS 屬性。
// 可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。
// 可選的 fn是動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)
// 停止動(dòng)畫(huà)：
// stop() 方法用于停止動(dòng)畫(huà)或效果，在它們完成之前； 該方法適用于所有 jQuery 效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫(huà)
// 語(yǔ)法:
// $(selector).stop(stopAll,goToEnd)
// 可選的參數(shù) stopAll 規(guī)定是否應(yīng)該清除動(dòng)畫(huà)隊(duì)列。默認(rèn)是 false 僅停止活動(dòng)的動(dòng)畫(huà)，允許任何排入隊(duì)列的動(dòng)畫(huà)向后執(zhí)行
// 可選的參數(shù) goToEnd 規(guī)定是否立即完成當(dāng)前動(dòng)畫(huà)。默認(rèn)是 false
// 默認(rèn)情況下 stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫(huà)
$(document).ready(function(){
$('button').click(function(){ //ruid被點(diǎn)擊了
$('#suo').animate({ //動(dòng)畫(huà)的屬性
left:'400px',
opacity:'0.3', //不僅有顏色的變化
height:'600px',
width:'600px',
// width:'toggle' 想高的屬性值
},1500)
}) //上下切換
})
</script>
<button>點(diǎn)擊</button>
<div id="suo">我是一個(gè)元素</div>
</body>
</html>