jQuery :animated 選擇器

jQuery 中的:animated 選擇器用於選擇當前正在使用 jQuery 動畫效果進行動畫處理的所有元素。

語法

以下是 jQuery :animated 選擇器的語法：

$(":animated")

引數

:animated 將選擇當前正在執行動畫的元素。

示例

在下面的示例中，我們使用 :animated 選擇器來將樣式應用於當前正在執行動畫的元素：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery :animated Selector Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script> 
        $(document).ready(function(){
            function animateDiv(){
                $("div:eq(0)").animate({height: "toggle"}, "slow");
                $("div:eq(0)").animate({height: "toggle"}, "slow", animateDiv);
            }
            animateDiv();
            
            $(".btn2").click(function(){
                $(":animated").css("border", "5px solid black");
            });
        });
    </script>
    <style>
        div {
            width: 100%;
            padding: 20px;
            margin-bottom: 10px;
            color: white;
            text-align: center;
            font-size: 1.2em;
        }
    </style>
</head>
<body>

<button class="btn2">Add border to the animated element</button>

<div style="background:purple;">Box 1</div>
<div style="background:orange;">Box 2</div>
<div style="background:teal;">Box 3</div>

</body>
</html>

執行並單擊按鈕後，:animate 將選擇正在執行動畫的元素，並在其周圍新增黑色邊框。

jquery_ref_selectors.htm

列印頁面