No consigo hacer funcionar los selectores en JQuery

[JCmaillo]

Buenas,

He creado una pequeña animación para mi web. La animación funciona pero no entiendo porqué la animación no se aplica a todos los elementos id iguales, únicamente se aplica al primero.

Tengo 4 bloques con los mismos selectores, pero solo se aplica al primero de ellos.

Código:

<script>
jQuery('#im_portada').hover(

  function () {
    jQuery('#ampliar').fadeIn();
  } 
, 
 function () {
    jQuery('#ampliar').fadeOut();
  });

</script>
</body>
</html>

[kokoou]

Basicamente un ID es un IDENTIFICADOR, por lo cual si tienes 4 elementos con el mismo ID deja de ser lo que es, un IDENTIFICADOR.

Se aplica solo al primero, porque se entiende que un ID pertece a un solo elemento, entonces toma como el elemento con ese IDENTIFICADOR al primero.

Para aplicarle a varios elementos, lo puedes hacer mediante una clase. Su poniendo que el elemento que se repite es "#ampliar, sería:

Código Javascript:

<script>
jQuery('#im_portada').hover(
 
  function () {
    jQuery('.ampliar').fadeIn();
  } 
, 
 function () {
    jQuery('.ampliar').fadeOut();
  });
 
</script>
 

[mayid]

pero no entiendo porqué la animación no se aplica a todos los elementos id iguales

Tal cual lo que dice kokoou. El id es para elementos unicos. Usa className.

Tema aparte: acordate que dentro de un evento podes usar el selector $(this):

<script type="text/javascript">

jQuery('#im_portada').hover( function () {

jQuery(this).fadeIn(); }
, function () {
jQuery(this).fadeOut();
});

</script>

</body>

[seik!]

Si deseas expandir una funcion a todos los elementos que compartan el selector...

Ocupa la funcion bind()

y si el contenido se agrega dinamicamente debes ocupar live()

asi tomara los elemento que compartan por ejemplo con un selector CLASS y repetira su comportamiento en todos los DOM que compartan este atributo.

Saludos..

[JCmaillo]

Gracias por la respuesta, con el selector class ya funciona para todos los elementos. Aunque me acabo de dar cuenta de que realmente no está funcionando como quiero.
Estos son los divs que tengo:

Código:

<!--PRIMER BOX-->
<div id="box" class="box1">
<a href="images/im_portada1.png" rel="lightbox[portada]">
<div id="im_portada" style="background-image:url(images/im_portada1.png);"><div class="ampliar"><img src="images/img_ampliar.png" width="117" height="13" /></div></div></a>
</div>
<!--SEGUNDO BOX-->
<div id="box" class="box2">
<a href="images/im_portada1.png" rel="lightbox[portada]">
<div id="im_portada" style="background-image:url(images/im_portada1.png);"><div class="ampliar"><img src="images/img_ampliar.png" width="117" height="13" /></div></div></a>
</div>
<!--TERCER BOX-->
<div id="box" class="box3">
<a href="images/im_portada1.png" rel="lightbox[portada]">
<div id="im_portada" style="background-image:url(images/im_portada1.png);"><div class="ampliar"><img src="images/img_ampliar.png" width="117" height="13" /></div></div></a>
</div>
<!--CUARTO BOX-->
<div id="box" class="box4">
<a href="images/im_portada1.png" rel="lightbox[portada]">
<div id="im_portada" style="background-image:url(images/im_portada1.png);"><div class="ampliar"><img src="images/img_ampliar.png" width="117" height="13" /></div></div></a>
</div>

El problema es que ahora cuando situo el cursor sobre el primer marco me anima todos los demás. ¿Como puedo hacer la selección para no tener que repetir el mismo script 4 veces con diferentes id y class.?

[mayid]

Salta a la vista que aun no corregiste los id repetidos. No tenes en claro el concepto de id. Y eso es básico para el uso de jQuery (también de CSS).

Leete esto:
http://www.blogdelaweb.com/conceptos...rial-html-css/

El problema es que ahora cuando situo el cursor sobre el primer marco me anima todos los demás. ¿Como puedo hacer la selección para no tener que repetir el mismo script 4 veces con diferentes id y class.?

Si ya corregiste el script, por favor republicalo así lo vemos. No podemos opinar a ciegas ;o)

[JCmaillo]

Es correcto lo que decis, lo he estado siempre usando mal. Corregiré todos los fallos de selectores y cuando los tenga lo republico.

Muchas Gracias

[JCmaillo]

Ya he corregido todos los selectores. Parece que funciona mejor que ántes.
El único inconveniente es que la animación debe de ocurrir en 4 elementos class ".ampliar" distintos, incluidos cada uno en otros 4 class ".im_portada". Con este script se animan todos a la vez. Estoy intentando usar subselectores pero no tengo mucha prática.

Código:

<script>
$('.im_portada').hover(

  function () {
    $('.ampliar').fadeIn();
  } 
, 
 function () {
    $('.ampliar').fadeOut();
  });

</script>

[mayid]

Bueno, volvemos a mi primer mensaje:
http://www.forosdelweb.com/f127/no-c...6/#post3542570

Usa $(this) o jQuery(this) para identificar tu elemento (el que origina el evento)

[JCmaillo]

Conseguido!!!

Probé lo que me comentaste del selector (this) pero no lo hice bien. Ahora si he conseguido dar con la estructura adecuada.

Muchas gracias.

Código:

<script>
$('.im_portada').hover(

  function () {
    $(this).children('.ampliar').fadeIn();
  } 
, 
 function () {
    $(this).children('.ampliar').fadeOut();
  });

</script>