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

打印页面