need help on jquery animate

Question

in my html code i have something like this.

<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>

then I'am using jquery to animate this,

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

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

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

            });
        </script>

this script now works for first

item without any problem. but the thing is I'don't have any idea how to apply this effect to other li items.

any help? Thank you

Upvotes: 0

Views: 46

Answer 1

I think this should do the work for you:

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

            });

So you can make your selector the id of the ul and target the li inside it and in the animate method your need to change your selector to $(this) because it will tell your code to run in the context of the current selector.

You can chain your methods like this to boost up the performance.

Answer 2

You can use jquery selectors for selecting all the 4 elements. eg.

$("ul#selections > li")

instead of

$(".tt")

So it becomes:

<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 3

use this

$("ul#selections li")

instead of

$("#tt")

example:

$(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 4

Set a class like .tt for all of those li and try the following,

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

            });