Foros del Web » Programando para Internet » Jquery »

fadein con jquery

Estas en el tema de fadein con jquery en el foro de Jquery en Foros del Web. Hola a todos, por favor necesito algo de ayuda. Hace semanas que vengo intentando resolver esto y no puedo. Estoy armando la web de mi ...
  #1 (permalink)  
Antiguo 21/07/2008, 14:06
 
Fecha de Ingreso: enero-2008
Mensajes: 39
Antigüedad: 12 años
Puntos: 1
fadein con jquery

Hola a todos, por favor necesito algo de ayuda.
Hace semanas que vengo intentando resolver esto y no puedo.

Estoy armando la web de mi estudio, a la vez incursiono con jquery.
Lo que quiero hacer es que las imágenes al aparecer lo hagan con el efecto de fadein.
El problema es que al hacer el primer click, no funciona el efecto, al volver a visitar el link, o sea al segundo click ya funciona.
Qué puede estar mal?

les dejo la web para que la vean:
http://www.qubo.com.uy/_index.html

y algunos de los codigos que probé

$("#01").click(function() {
$("#marco").fadeOut('slow');
$("#marco").queue(function () {
$("#marco").fadeIn('slow');
$('#foto').attr({src: "imagenes/expoCVF/expo-cvf_01.gif"});
$(this).dequeue();});
$("#navegador .navactivo").removeClass('navactivo').addClass('na v');
$(this).addClass('navactivo')
});

otro

$("#06").click(function() {
$('#foto').attr({src: "imagenes/expoCVF/expo-cvf_06.jpg"});
$('#marco').css({display: "none"});
$(document).ready(function(){$("#marco").fadeIn("s low");});
$("#navegador .navactivo").removeClass('navactivo').addClass('na v');
$(this).addClass('navactivo')
});

Espero que alguno de uds. logré descifrarlo.
Gracias
  #2 (permalink)  
Antiguo 21/07/2008, 14:38
Avatar de marcopoloaz06  
Fecha de Ingreso: julio-2007
Ubicación: México
Mensajes: 457
Antigüedad: 12 años, 6 meses
Puntos: 11
Respuesta: fadein con jquery

Hola,
mira ps
aver si asi
es como tu quieres
Código HTML:
<script type="text/javascript">

 $(document).ready(function(){
    $("#img_").click(function(){
        $(this).fadeOut("normal",function(){
            this .src = "http://www.vevni.com/wp-content/uploads/2008/01/forosdelweb_out.jpg";
        }).fadeIn();
    });
 });

</script>

<img src="http://www.seriousteam.es/images/forosdelweb2.JPG" id="img_" /> 
creo que si...

SAludos
:]
__________________
Aerolíneas Alicia :D
  #3 (permalink)  
Antiguo 21/07/2008, 15:25
 
Fecha de Ingreso: enero-2008
Mensajes: 39
Antigüedad: 12 años
Puntos: 1
Respuesta: fadein con jquery

lo probé así

$("#01").click(function() {
$("#marco").fadeOut('slow',function(){
$('#foto').attr({src: "imagenes/expoCVF/expo-cvf_01.gif"});}).fadeIn('slow');
$("#navegador .navactivo").removeClass('navactivo').addClass('na v');
$(this).addClass('navactivo')
});

Está bueno porque hago lo mismo que antes pero con menos lineas, pero me pasa lo mismo.
Estoy haciendo algo mal?
  #4 (permalink)  
Antiguo 21/07/2008, 16:36
Avatar de marcopoloaz06  
Fecha de Ingreso: julio-2007
Ubicación: México
Mensajes: 457
Antigüedad: 12 años, 6 meses
Puntos: 11
Respuesta: fadein con jquery

hola,
bueno pero
eso lo tienes que
poner en todos, para
que no escribas tanto usa
un each que para eso lo hicieron

estaba viendo esta pag
http://www.qubo.com.uy/arq/arq_graf_AR07.html
Código HTML:
    $("div[class^='nav']").each(function(i){

       $(this).click(function() {          
          
         $('#marco').fadeOut("normal",function(){
            $('#foto').attr("src", "imagenes/grafica/vivienda2007_"+ $(this).attr("id") +".jpg");
          }).fadeIn("slow");
          $("#navegador .navactivo").removeClass('navactivo').addClass('nav');
          $(this).addClass('navactivo');
  
       });
       
    });
:]
__________________
Aerolíneas Alicia :D
  #5 (permalink)  
Antiguo 22/07/2008, 01:59
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: fadein con jquery

marcopoloaz06: En jQuery no necesitas hacer un each para eso. Puedes directamente hacer $("div[class^='nav']").click(...) y se aplica a todos los elementos devueltos por la búsqueda.



_rulo: Si entiendo lo que quieres hacer, el problema es que estás cargando la imagen directamente y luego haciéndole un efecto de fadeIn. Lo que tendrías que hacer es antes de cargarla, ponerla como no visible, y una vez cargada hacer el fadeIn.
  #6 (permalink)  
Antiguo 22/07/2008, 02:22
Avatar de marcopoloaz06  
Fecha de Ingreso: julio-2007
Ubicación: México
Mensajes: 457
Antigüedad: 12 años, 6 meses
Puntos: 11
Respuesta: fadein con jquery

hola,
bueno venkman
tienes toda la razón
pero me voy a justificar
esque antes de usar
Código HTML:
$(this).attr("id")
usaba la i de el each entonces
se me fue el avion muy lejos, sorry.

Y si tienes razón con lo de _rulo

adios
xd
__________________
Aerolíneas Alicia :D
  #7 (permalink)  
Antiguo 22/07/2008, 14:40
 
Fecha de Ingreso: enero-2008
Mensajes: 39
Antigüedad: 12 años
Puntos: 1
Respuesta: fadein con jquery

Un poco más despacio muchachos que soy un autodidacta en esto del jquery

venkman, como harías eso que me sugeris por favor, he probado algunas cosas en esa dirección pero no di con la tecla.

Gracias!!!
  #8 (permalink)  
Antiguo 24/07/2008, 15:34
 
Fecha de Ingreso: enero-2008
Mensajes: 39
Antigüedad: 12 años
Puntos: 1
Respuesta: fadein con jquery

Por favor, no me abandonen!
  #9 (permalink)  
Antiguo 25/07/2008, 01:20
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: fadein con jquery

Mira, el problema es que cuando haces esto:
Código:
$('#foto').attr("src", "imagenes/grafica/vivienda2007_"+ $(this).attr("id") +".jpg");
la foto no se carga inmediatamente, sino que tarda un rato en cargarse. Así que no puedes empezar a hacer el fadeIn hasta que no se haya cargado.

No sé si funcionará porque ahora no me apetece probarlo, pero en lugar de esto:
Código:
       $(this).click(function() {          
          
         $('#marco').fadeOut("normal",function(){
            $('#foto').attr("src", "imagenes/grafica/vivienda2007_"+ $(this).attr("id") +".jpg");
          }).fadeIn("slow");
//...
       });
Prueba con algo así:
Código:
$(this).click(function() {
    $('#marco').fadeOut("normal",function(){
        $('#foto').attr("src", "imagenes/grafica/vivienda2007_"+ $(this).attr("id") +".jpg").load(function() {
            $('#marco').fadeIn("slow");
        });
    });
//...
});
  #10 (permalink)  
Antiguo 30/07/2008, 10:31
 
Fecha de Ingreso: enero-2008
Mensajes: 39
Antigüedad: 12 años
Puntos: 1
Respuesta: fadein con jquery

Gracias venkman!!!
Lo probé y funciona.

Lo que no anda es la concatenación en ie 6, pero bueno, escribire un poco más
Cuando no tenga tantos visitantes en el sitio que entren con ie 6 lo cambio.

un abrazo
  #11 (permalink)  
Antiguo 01/08/2008, 14:30
 
Fecha de Ingreso: enero-2008
Mensajes: 39
Antigüedad: 12 años
Puntos: 1
Respuesta: fadein con jquery

ya vi que es lo que no funciona en la concatenación.
El this me devuelve "marco", y queda:

vivienda2007_marco.jpg

como puedo hacer?
  #12 (permalink)  
Antiguo 02/08/2008, 04:25
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: fadein con jquery

¿Exactamente qué id es el que quieres concatenar? Sin saber eso no puedo más que tratar de adivinar.
  #13 (permalink)  
Antiguo 02/08/2008, 13:24
 
Fecha de Ingreso: enero-2008
Mensajes: 39
Antigüedad: 12 años
Puntos: 1
Respuesta: fadein con jquery

Este es el código de los botones:

<div id="menu">
<div id="navegador">
<div id="01" class="navactivo">01</div>
<div id="02" class="nav">02</div>
<div id="03" class="nav">03</div>
<div id="04" class="nav">04</div>
<div id="05" class="nav">05</div>
<div id="06" class="nav">06</div>
</div>

y este es el script:

$("div[class^='nav']").click(function() {

$('#foto').fadeOut("slow",function(){
$('#foto').attr("src", "imagenes/aeci/aeci_"+ $(this).attr("id") +".jpg").load(function() {
$('#foto').fadeIn("slow"); });
});
$("#navegador .navactivo").removeClass('navactivo').addClass('na v');
$(this).addClass('navactivo');

});


en este caso me devuelve aeci_foto.jpg

Lo que quiero es que me devuelva el número del botón que está asociado a la imagen.
O sea, cuando hago click en #01, aparece aeci_01.jpg, con #02, aparece aeci_02.jpg y así...

es posible?
  #14 (permalink)  
Antiguo 02/08/2008, 18:30
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: fadein con jquery

Código:
$("div[class^='nav']").click(function() {
    idNav = $(this).id;
    $('#marco').fadeOut("normal",function(){
        $('#foto').attr("src", "imagenes/grafica/vivienda2007_"+ idNav +".jpg").load(function() {
            $('#marco').fadeIn("slow");
        });
    });
//...
});
O algo similar
  #15 (permalink)  
Antiguo 04/08/2008, 12:36
 
Fecha de Ingreso: enero-2008
Mensajes: 39
Antigüedad: 12 años
Puntos: 1
Respuesta: fadein con jquery

Lo resolvi así, que tal?


$("div[class^='nav']").click(function() {
$("#navegador .navactivo").removeClass('navactivo').addClass('na v');
$(this).addClass('navactivo');
$('#foto').fadeOut("slow",function(){
$('#foto').attr("src", "imagenes/conc/conc_aeci_"+ $('.navactivo').attr("id") +".jpg").load(function() {
$('#foto').fadeIn("slow"); });
});
});


Muchas gracias por todo!!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 23:36.