JQuery - Como solucionaria el parrafo en jquery

   
Vista:
Imágen de perfil de Jaimie

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

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Como solucionaria el parrafo en jquery

Publicado por Cbastian (11 intervenciones) el 24/12/2015 17:26:44
Hola, yo intentaria lo siguiente:

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="foto">
  <img src="C:\Users\vegaimagen\Desktop\nena\taty1.JPG" width="70" height="70" to-p="titulo"></br>
  </br>
  <p id="titulo">Over 20 years experience</p>
  <img src="C:\Users\vegaimagen\Desktop\nena\taty3.jpg" width="70" height="70" to-p="title"> </br>
  </br>
  <p id="title">Bilingual</p>
  <img src="C:\Users\vegaimagen\Desktop\nena\taty2.jpg" width="70" height="70" to-p="picture"></br>
  </br>
  <p id="picture">Overnight</p>
  <img src="C:\Users\vegaimagen\Desktop\nena\taty4.jpg" width="70" height="70" to-p="grafic">
  <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
29
30
$(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() {
    	var to = $(this).attr("to-p");
      $("#"+to).fadeIn(1000).delay(1000).fadeOut(1000);
 
 
    }).delay(3000); //termina animate
    $(this).animate({
      marginLeft: "0",
      width: "80px",
      height: "80px"
 
    }, 1000);
 
  }); //termina click
 
 
 
}); //termina funcion ready

Si no entiendes algo no dudes en preguntar
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Jaimie

Como solucionaria el parrafo en jquery

Publicado por Jaimie (7 intervenciones) el 28/12/2015 16:59:54
Gracias lo intentyare asi, pero me gustaria saber que es"top P" ...disculpa soy novato en esto
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como solucionaria el parrafo en jquery

Publicado por Cbastian (11 intervenciones) el 29/12/2015 23:10:16
Hola, es "to-p" con el guion, es un atributo html por decirlo de alguna forma "inventado", los cuales me parece que al usar jquery es muy facil de usar, tengo entendido que en html5 no da problemas.

Tratare de explicar un poco mejor, has de cuenta que tienes el siguiente div:

1
<div atributoInventado="12345"></div>

en donde dice "atributoInventado" es como el nombre de una variable, y "12345" es el valor de esta.

por eso si hacemos esto:

1
var atributo = $("div").attr("atributoInventado");  //Getter del atributo

en la variable atributo queda guardado el valor "12345" que corresponde a nuestro atributo inventado.

Espero que hayas entendido mejor, a veces se me complica darme a entender...

Comentanos por favor.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar