jquery 學習第五期

02-02

創建基於圖像的切換效果

先介紹本解決方案所使用的方法 animate()方法首先了解 animate()方法

1.animate()

此方法用於自定義的動畫應用到選定的元素.根據指定的css屬性和使用的緩和參數來控制自定義動畫.

調用格式為 .animate(properties,speed,easing,callback);

properties 是指css屬性即該元素在動畫結束後所到的值.

speed 是預定義的字元串或以毫秒為單位的數值,決定效果或動畫的持續時間.預定義的字元串有 slow normal fast 默認為normal 可指定speed 參數

easing 是一個函數 (可選) 控制動畫隨著時間如何進行有兩個函數linear和swing

callback 是動畫完成那個後調用的函數.

<!DOCTYPE HTML>n<head>n <meta charset="UTF-8">n <title>簡單動畫效果</title>n <script src="jquery-3.2.1.min.js"></script>n <script>n $(document).ready(function () {n $(img).click(function () {n $(this).animate({left:600},slow);n });n });n </script>n <style>n img{n position: relative;n }n </style>n</head>n<body>n<div>n <img src="1421992785439.jpg">n</div>n</body>n

從而我們就完成了第一層效果點擊圖片使其平移.

jquery 學習 第五期

jquery 學習第五期