Como solucionaria el parrafo en jquery
Publicado por Jaimie (7 intervenciones) el 23/12/2015 18:54:47
Buenas tardes: Hice un efecto de animacion en 4 imagenes, en cada imagen si se le da click sale un parrafo pequeno,las imagenes estan verticalmente, todo va bien hasta ahi, la animacion todo.
A cada parrafo le di un id diferente para que saliera el efecto de la imagen,si lo hago con un solo id me saldria no mas la animacion de la primera imagen, por eso coloque otrso id al resto de imagenes.
Ahora lo que pasa es que cuando le doy por ejemplo a la tercera imagen,para que haga su animacion me sale los parrafos de las anteriores animaciones, como podria corregir eso, que si le doy click a una sola imagen salga no mas el parrafo de dicha imagen...aqui les dejo el codigo que use en html y jquery
HTML
JQUERY
los // son los comentarios para no perderme, gracias de antemano por su ayuda
A cada parrafo le di un id diferente para que saliera el efecto de la imagen,si lo hago con un solo id me saldria no mas la animacion de la primera imagen, por eso coloque otrso id al resto de imagenes.
Ahora lo que pasa es que cuando le doy por ejemplo a la tercera imagen,para que haga su animacion me sale los parrafos de las anteriores animaciones, como podria corregir eso, que si le doy click a una sola imagen salga no mas el parrafo de dicha imagen...aqui les dejo el codigo que use en html y jquery
HTML
1
2
3
4
5
6
7
8
9
10
<div id="foto">
<img src="C:\Users\vegaimagen\Desktop\nena\taty1.JPG" width="70" height="70" ></br></br>
<p id="titulo">Over 20 years experience</p>
<img src="C:\Users\vegaimagen\Desktop\nena\taty3.jpg" width="70" height="70" > </br></br>
<p id="title">Bilingual</p>
<img src="C:\Users\vegaimagen\Desktop\nena\taty2.jpg" width="70" height="70" ></br></br>
<p id="picture">Overnight</p>
<img src="C:\Users\vegaimagen\Desktop\nena\taty4.jpg" width="70" height="70" >
<p id="grafic">References available</p>
</div>
JQUERY
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function(){
$("#titulo").hide();
$("#title").hide();
$("#picture").hide();
$("#grafic").hide();
$("#foto img").width(80).height(80).click(function(){
$(this).animate({
marginLeft:"150px",width:"300px",height:"200px"
},1000,function(){
$("#titulo").fadeIn(1000).delay(1000).fadeOut(1000);
$("#title").fadeIn(1000).delay(1000).fadeOut(1000);
$("#picture").fadeIn(1000).delay(1000).fadeOut(1000);
$("#grafic").fadeIn(1000).delay(1000).fadeOut(1000);
}).delay (3000); //termina animate
$(this).animate({
marginLeft:"0",width:"80px",height:"80px"
},1000);
}); //termina click
}); //termina funcion ready
los // son los comentarios para no perderme, gracias de antemano por su ayuda
Valora esta pregunta
0
