Nie poprawnie działająca animacja w jQuery.

0

Witam!

Mój problem polega na tym, że stworzyłem diva, a do niego skrypt napisany w jQuery, który po najechaniu myszką na diva zwiększa jego wysokość o 20px, a po zjechaniu myszką z diva zmniejsza o 20px. Wszystko działa fajnie, póki nie umieszczę czegoś w tym divie. Jeśli dodam obrazek WEWNĄTRZ tego diva to po najechaniu kursorem na obrazek, który znajduje się w środku jQuery uznaje, ze kursor opuścił diva i zmniejsza jego wysokość. To trochę irytujące, bo umieszczając kilka elementów wewnątrz po przejechaniu myszką po nich div zmienia rozmiary kilkukrotnie, chociaż kursor ani razu nie wychodzi poza jego krawędzie.

Mam małe doświadczenie w JS, a jQuery zacząłem się dopiero uczyć i nie mam pojęcia jak to "obejść", a nie potrafię napisać właściwego zapytania do Google aby uzyskać tam pomoc. Dlatego z góry dziękuję za waszą. :)

EDIT: Dodatkowo zauważyłem, że bardziej przeszkadzają krawędzie niż same te elementy w divie. Bo jeśli najadę na obrazek to animacja mi się powtarzza tylko podczas przechodzenia przez krawędź, a potem jak kursor jest na obrazku już to traktuje to normlanie tka jakby był w divie i jest okej. Więc to tlyko krawędzie mi przeszkadzają. Jeszcze dziwniej jak dla mnie.

0

Użyj pseudoklasy :hover w CSS. W JS popatrz na event-bubbling.

0

To, że hover tak działa to wiem, ale chciałbym jakoś to zrobic w jQuery tak dla samego siebie aby wiedzieć na przyszłość jak zrobić to. O ile nie jest to jakies bardzo skomplikowane, bo na razie jestem początkujący

0

Tutaj masz przykład:
http://codepen.io/anon/pen/pymLWN

Możesz używać samego CSS - :hover albo jakichś trików, np. div z position: absolute; i na całą powierzchnię tego zewnętrznego elementu. Jeśli chodzi o JS z jQuery, to z .hover() dodajesz 2 funkcje, jedna na początek, a druga na koniec stanu hover. Jeżeli korzystasz z innych metod na dodawanie event listenera, to sprawdź, czy event bubbling sięga tego diva z zewnątrz.

1 użytkowników online, w tym zalogowanych: 0, gości: 1