• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jq animacja tylko jednego bloku

VPS Starter Arubacloud
0 głosów
119 wizyt
pytanie zadane 3 maja 2017 w JavaScript przez UltraSF Stary wyjadacz (11,740 p.)

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? 

1 odpowiedź

0 głosów
odpowiedź 3 maja 2017 przez Comandeer Guru (599,730 p.)
wybrane 3 maja 2017 przez UltraSF
 
Najlepsza

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

komentarz 3 maja 2017 przez UltraSF Stary wyjadacz (11,740 p.)
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>

 

komentarz 3 maja 2017 przez UltraSF Stary wyjadacz (11,740 p.)
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.
3
komentarz 3 maja 2017 przez Comandeer Guru (599,730 p.)
Cały czas myślisz selektorem zamiast DOM-em! DOM to referencje i obiekty, nie – stringi. https://jsfiddle.net/Comandeer/8nnatfd5/
komentarz 3 maja 2017 przez UltraSF Stary wyjadacz (11,740 p.)
Okej, już rozumiem, dziękuje bardzo :)

Podobne pytania

0 głosów
1 odpowiedź 462 wizyt
pytanie zadane 10 lutego 2018 w JavaScript przez Scypyon Gaduła (3,450 p.)
0 głosów
1 odpowiedź 165 wizyt
pytanie zadane 3 lipca 2016 w HTML i CSS przez Manickus Obywatel (1,030 p.)
0 głosów
1 odpowiedź 135 wizyt
pytanie zadane 20 lutego 2020 w JavaScript przez matizuu Obywatel (1,100 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...