Forum PHP.pl > [jQuery][JavaScript] Zmiana diva przy mouseover

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery][JavaScript] Zmiana diva przy mouseover

koryx

3.06.2014, 12:18:27

Mam na stronie kilka obrazków i chciałbym aby po najechaniu na któryś zmieniała się jego wartość "opacity". Kod html wygląda tak:

Kod

<div id="mojdiv" class="sekcja2">
<p><img src="img1.jpg" alt="1" id="p1" /><span id="p11" class="podpis">podpis</span></p>
<p><img src="img2.jpg" alt="2" id="p2" /><span id="p22" class="podpis">podpis2</span></p>
....
</div>

napisałem 2 funkcje:

Kod

$( "#p1" ).mouseover(function() {
  $( "#p1" ).animate( { opacity: 1 },  { duration:500 });
  $( "#p11" ).fadeIn( 500 );
} );

$( "#p1" ).mouseout(function() {
  $( "#p1" ).animate( { opacity: 0.6 },  { duration:500 });
  $( "#p11" ).fadeOut( 500 );
} );

Powyższy skrypt działa dla pierwszego obrazka jednak chciałbym to jakoś usprawnić żeby nie pisać osobnej funkcji dla każdego elementu img a dla wszystkich w tym divie ale mając na uwadze, że na stronie znajdują się również inne obrazki, które mają nie mieć nic wspólnego z tą funkcją.

Poniższa funkcja działa na wszystkie obrazki w divie równocześnie a mi chodzi żeby tylko na 1 konkretny.

Kod

$( "#mojdiv" ).mouseover(function() {
$( "img" ).animate( { opacity: 1 }, { duration:500 });
$( "span" ).fadeIn( 500 );
} );

ps. czy każdy element img musi mieć id żeby je rozróżniać czy jest jakiś inny sposób?

nospor

3.06.2014, 12:20:03

Nadaj obrazkom, ktore chcesz obrabiać, jakąś klase, i rob co chcesz tylko dla tej klasy

koryx

3.06.2014, 12:41:20

Tylko wtedy też będą się zmieniały wszystkie obrazki posiadające daną klasę. Bardziej chciałem żeby zmieniał się tylko jeden konkretny obrazek na który najadę myszką. Coś poszukałem i wydaje mi się (jeśli myślę prawidłowo), że trzeba jakoś użyć funkcji getElementById ale nie bardzo wiem w jaki sposób należy to zrobić tutaj.

Turson

3.06.2014, 12:43:03

Kod

$('.mojdiv img').mouseover(function(){
$(this).animate( { opacity: 1 }, { duration:500 });
$(this).fadeIn( 500 );
})

koryx

3.06.2014, 13:12:07

super, o to chodziło, dziękuję

tylko 1 rzecz jeszcze

... w tym samym divie jest opis w znaczniku span, który miał się dodatkowo pojawiać, przy powyższym rozwiązaniu animacja działa tylko na obrazek

ziolo

3.06.2014, 13:22:14

[PHP] pobierz, plaintext 
$('.mojdiv img').mouseover(function(){
$(this).animate( { opacity: 1 },  { duration:500 });
$(this).next().fadeIn( 500 );
})
[PHP] pobierz, plaintext

Next i znajduje ci kolejny element czyli span

koryx

3.06.2014, 14:46:59

dziękuję, działa jak chciałem

nospor

3.06.2014, 15:14:56

Cytat

Tylko wtedy też będą się zmieniały wszystkie obrazki posiadające daną klasę. Bardziej chciałem żeby zmieniał się tylko jeden konkretny obrazek na który najadę myszką.

mouseover nie dziala na wszystkie naraz, tylko w danej chwili na jeden.... Staraj sie czasem pomyslec nad tym co piszesz.

Turson podal: $('.mojdiv img'
A w mojej wersji mialo byc: $('.klasa_nadana_obrazkom_ktore_cie_interesują'

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.