Jq animacja tylko jednego bloku

Question

Witam mam taki kod

<script>
    $('.li').on({
        'mouseover':function(){
            $('.img-nav').stop().animate({width:74,height:52,marginLeft:5}, 500);
            $('.a-nav').stop().animate({width:74,height:52,padding:10}, 500);
            $(this).stop().animate({height:52}, 500);
        },
        'mouseout' : function() {
            $('.img-nav').stop().animate({width:0,height:26,marginLeft:0}, 500);
            $('.a-nav').stop().animate({width:158,height:26,padding:0}, 500);
            $(this).stop().animate({height:26}, 500);
        }
    });

i html kawałek tylko tego co potrzeba

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Test2<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="" class="li">
                                <div class="img-nav"></div>
                                <p class="a-nav">Test2-1</p>
                            </a>
                        </li>
                    </ul>
                </li>

 

zdj pokazujący jak działa.

gdy najadę na Test2-1

natomiast, gdy dodam kolejne pod struktury menu, to najadę tylko na jeden, a animują się wszystkie. Jak dokonać tego, aby animowało się to na które najeżdżam? 

Answer 1

Pobierz tylko te, które są w najechanym elemencie listy: $( '.jakiElement', jegoRodzic );

Comments

Ale gdy jest to menu, to wszystkie one mają "tego samego rodzica", tzn. różne, ale każdy z nich to i tak jest tag li, wiec nic to nie zmienia :(            


    <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Test2<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="" class="li">
                                <div class="img-nav"></div>
                                <p class="a-nav">Test2-1</p>
                            </a>
                        </li>
                        <li>
                            <a href="" class="li">
                                <div class="img-nav"></div>
                                <p class="a-nav">Test2-2</p>
                            </a>
                        </li>
                        <li>
                            <a href="" class="li">
                                <div class="img-nav"></div>
                                <p class="a-nav">Test2-3</p>
                            </a>
                        </li>
                        <li>
                            <a href="" class="li">
                                <div class="img-nav"></div>
                                <p class="a-nav">Test2-4</p>
                            </a>
                        </li>
                    </ul>
                </li>

 

---

Mógł bym każdemu nadać inne id i animować każdy z osobna, ale czuje że to nie jest dobry sposób. Bo ani mi to nie leży w "konwencji" programistycznej, a drugą przeszkodą później będzie fakt że będą one generowane,a nie stworzone statycznie.

---

Cały czas myślisz selektorem zamiast DOM-em! DOM to referencje i obiekty, nie – stringi. https://jsfiddle.net/Comandeer/8nnatfd5/

---

Okej, już rozumiem, dziękuje bardzo :)