Question

在我的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>

此脚本现在适用于第一个

项目，没有任何问题。但问题是我不知道如何将此效果应用于其他礼品。

任何帮助？谢谢

Answer 1

为所有.tt设置类似li的类，然后尝试以下操作，

$(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"
                    });
                });

            });

Answer 2

使用此

$("ul#selections li")

而不是

$("#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"
                    });
                });

            });

Answer 3

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

$("ul#selections > li")

而不是

$(".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>

Answer 4

我认为这应该为你做的工作：

Demo Fiddle

            $(document).ready(function() {

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

            });

因此，您可以将您的选择器设为ul的ID并将其定位在其中，并且在animate方法中，您需要将选择器更改为$(this)，因为它会告诉您的代码在当前选择器的上下文。

您可以像这样链接您的方法以提高效果。

需要关于jquery动画的帮助

4 个答案: