[jQuery][JavaScript] Zmiana diva przy mouseover Opcje

[koryx]

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]

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

[koryx]

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]

Kod

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

[koryx]

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]

[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

Ten post edytował ziolo 3.06.2014, 13:23:01

[koryx]

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

[nospor]

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