Javascript 需要关于jquery动画的帮助吗

在我的html代码中，我有这样的代码

<ul id="selections">
                        <li id="tt">
                            <div style="background-color: #0099ff; width: 200px;">
                                <a style="padding: 5px;" id="aa" href="<?php echo base_url() . 'new_user'; ?>">New User</a>
                            </div>
                        </li>
                        <li>
                            <div style="background-color: #0099ff; width: 200px;">
                                <a href="<?php echo base_url() . 'old_user'; ?>">Existing User</a>
                            </div>
                        </li>
                        <li>
                            <div style="background-color: #0099ff; width: 200px;">
                                <a href="<?php echo base_url() . 'management_hod'; ?>">Managements / HOD</a>
                            </div>
                        </li>
                        <li>
                            <div style="background-color: #0099ff; width: 200px;">
                                <a href="<?php echo base_url() . 'hr'; ?>">HR</a>
                            </div>
                        </li>
</ul>

然后我用jquery来制作动画

<script>
            $(document).ready(function() {

                $("#tt").mouseover(function() {
                    $("#aa").stop().animate({
                        padding: "5px 5px 5px 100px",
                    });
                });

                $("#tt").mouseout(function() {
                    $("#aa").stop().animate({
                        padding: "5px"
                    });
                });

            });
        </script>

$（文档）.ready（函数（）{
$（“#tt”）.mouseover（函数（）{
$（“#aa”）.stop（）.animate({
填充：“5px 5px 5px 100px”，
});
});
$（“#tt”）.mouseout（函数（）{
$（“#aa”）.stop（）.animate({
填充：“5px”
});
});
});

此脚本现在可以毫无问题地用于第一个

项。但问题是，我不知道如何将这种效果应用于其他li项目

有什么帮助吗？

---

谢谢

为所有

li

设置一个类似

.tt

的类，然后尝试以下操作

$(document).ready(function() {

                $(".tt").mouseover(function() {
                    $(this).find('a').stop().animate({
                        padding: "5px 5px 5px 100px",
                    });
                });

                $(".tt").mouseout(function() {
                    $(this).find('a').stop().animate({
                        padding: "5px"
                    });
                });

            });

用这个

$("ul#selections li")

而不是

$("#tt")

$(".tt")

例如：

$(document).ready(function() {

                $("ul#selections li").mouseover(function() {
                    $(this).find('a').stop().animate({
                        padding: "5px 5px 5px 100px",
                    });
                });

                $("ul#selections li").mouseout(function() {
                    $(this).find('a').stop().animate({
                        padding: "5px"
                    });
                });

            });

您可以使用jquery选择所有4个元素。例如

$("ul#selections > li")

而不是

$("#tt")

$(".tt")

因此，它变成：

<script>
        $(document).ready(function() {

            $("ul#selections > li").mouseover(function() {
                $("#aa").stop().animate({
                    padding: "5px 5px 5px 100px",
                });
            });

            $("ul#selections > li").mouseout(function() {
                $("#aa").stop().animate({
                    padding: "5px"
                });
            });

        });
    </script>

$（文档）.ready（函数（）{
$（“ul#selections>li”）.mouseover（函数（）{
$（“#aa”）.stop（）.animate({
填充：“5px 5px 5px 100px”，
});
});
$（“ul#selections>li”）.mouseout（函数（）{
$（“#aa”）.stop（）.animate({
填充：“5px”
});
});
});

我认为这应该可以为您完成以下工作：

因此，您可以将选择器设置为

ul

的id，并以其中的li为目标，在动画方法中，您需要将选择器更改为

$（this）

，因为它将告诉您的代码在当前选择器的上下文中运行

---

您可以像这样链接您的方法以提高性能。

@Yasitha非常乐意提供帮助。！：）