animate方法使用總結

時間 2019-11-11

標籤 animate 方法使用總結简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en" class="loading">
<head>
    <meta charset="UTF-8">
    <title>animate方法</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
          /*  show()方法和hide()方法會同時修改元素的多個樣式屬性，即高度、寬度和不透明度:
              fadcOut()方法和fadeln()方法只會修改元素的不透明度:
              slideDown()方法和slideUp()方法只會改變元素的高度.
 animate方法的標準格式:要使用此方式的前提是被操做的元素必須有position屬性，不然沒效果
              animate(params, speed,callback);
           */
           $(".panel").click(function(){
               //點擊元素後在1秒內向右移動300px的同時元素高度增長到200px，不刷新頁面的狀況下再次點擊元素不會再移動
               $(this).animate({left:"300px",height:"200px"},1000);
               //不刷新頁面的前提下，再次點擊元素時在上一次位置的基礎上向右移動300px，不是向左
               //$(this).animate({left:"+=300px"},1000);
           });
        });
    </script>
    </head>
<body>
    <div class="panel" style="width: 100px; height: 100px;margin: 100px; background: #647787; position: relative;" ></div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。