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