JQuery動畫

時間 2020-08-09

標籤 jquery 動畫欄目 JQuery 简体版

原文原文鏈接

一，show和hide動畫javascript

案例：點擊收縮和展開（相似於QQ面板的效果）css

 <script language="javascript">
        $(document).ready(function () {
            $("#t1").click(function () {
                if ($("#t2").css("display")!="none") {
                    $("#t2").hide(3000, function () {
                        $("#t1").html("點擊展開");
                    });  //3000表明時間，3000毫秒  逗號後面跟的是回調函數，hide執行完以後調用
                }
                else {
                    $("#t2").show(3000, function () {
                        $("#t1").html("點擊收縮");
                    });
                }
            });
        })
    </script>

二，fadeIn和fadeOut動畫（它只是一種顏色的漸變，透明到不透明的漸變）html

案例：同上java

  <script language="javascript">
        $(document).ready(function () {
            $("#t1").click(function () {
                if ($("#t2").css("display")!="none") {
                    $("#t2").fadeOut(3000, function () {
                        $("#t1").html("點擊展開");
                    });  
                }
                else {
                    $("#t2").fadeIn(3000, function () {
                        $("#t1").html("點擊收縮");
                    });
                }
            });
        })
    </script>

三，slideUp和slideDown動畫（相似於捲簾門的效果）ide

案例：同上函數

<script language="javascript">
        $(document).ready(function () {
            $("#t1").click(function () {
                if ($("#t2").css("display")!="none") {
                    $("#t2").slideUp(3000, function () {
                        $("#t1").html("點擊展開");
                    });  
                }
                else {
                    $("#t2").slideDown(3000, function () {
                        $("#t1").html("點擊收縮");
                    });
                }
            });
        })
    </script>