fadein con jquery

[_rulo]

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

[marcopoloaz06]

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
:]

[_rulo]

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?

[marcopoloaz06]

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');
  
       });
       
    });

:]

[venkman]

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.

[marcopoloaz06]

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

[_rulo]

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!!!

[_rulo]

Por favor, no me abandonen!

[venkman]

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");
        });
    });
//...
});

[_rulo]

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

[_rulo]

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?

[venkman]

¿Exactamente qué id es el que quieres concatenar? Sin saber eso no puedo más que tratar de adivinar.

[_rulo]

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?

[venkman]

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

[_rulo]

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!!!!