InnerHTML con Fade In?

Hola!

Estoy haciendo por javascript un "innerHTML" para que al clicar en unos botones aparezca cada vez un texto diferente en un div y me gustaría que en vez de aparecer y desaparecer de golpe los textos hiciesen un fade in y fade out ¿hay alguna manera de hacer esto?

Un saludo y gracias!

Pues por ejemplo,

con CSS3:
Fade CSS3

o con jQuery:
fadeIn()
fadeOut()
fadeTo()

Un saludo.

Gracias, eso me lo se, pero como hago para juntar eso con un innerHTML?

pongamos que yo tengo esto:

Código :

function intro_contenido(texto){
document.getElementById("midiv").innerHTML=texto;
}

y

Código :

<div id="midiv">

y unos botones por la web con un onclick que llama a la función y le pasa por parámetro el contenido (texto) que se mostrara en el div (midiv)

Código :

<input type=button" onclick="intro_contenido ('hola')";/>
<input type=button" onclick="intro_contenido ('que tal?')";/>
<input type=button" onclick="intro_contenido ('pues bien')";/>

Así lo tengo ahora mismo pero claro, lo hace de golpe el meter el texto y a mi me gustaría que fuera más suave, haciendo un fade out el texto que hubiese al marcharse y un fade in el nuevo que entre.

Si realmente te lo sabes, ¿cómo es que no sabes usar un callback, de cualquier fade de los que te he puesto arriba?...

Investiga un poco anda.

Un saludo.

Quería decir que cuando se trata de modificar una opacidad, el tamaño de un div etc..no hay problema con css3 pero no pillo como hacer una transición con CSS3 a un elemento que le aparece el contenido por un innerHTML...

con jquery cuando tenemos un div ya existente con su contenido también entiendo como hacerlo desaparecer y aparecer, pero no como hacer eso con su contenido cada vez que su contenido es insertado por javascript...

Yo personalmente lo haría con jQuery.

Para empezar tienes fallo en la sintaxis

Código HTML :

<input type=button" onclick="intro_contenido ('hola')";/>

Te faltan unas comillas antes de button y te sobra el útimo ";"

Código HTML :

<input type="button" onclick="intro_contenido('hola')" />

Eso en los 3 inputs

Después lo que deberías hacer, es crear una función fade por ejemplo miFade() ¡Qué originalidad!, que lleve un callback a intro_contenido y que se encargue de hacer desaparecer el texto. La primera acción de intro_contenido será cambiar el texto, mientras este este al 0% de opacidad, y lo siguiente volver a mostrarlo con otro fade. Cambiando las llamadas de los inpus a miFade en vez de a intro_contenido y un par de variables tienes hecho el ejercicio.

Espero te sirva,
un saludo.

Los inputs no son los del código bueno los hice aquí aprisa y corriendo, sorry

Respecto a lo otro creo entender por donde van los tiros...pero necesito llamar a intro_contenido en cada botón pues en cada botón el texto cambia y se lo doy por parámetros. Si el botón llama a mi_fade ya no podre asignarle el texto a cada botón.

Un saludo y gracias

Haber te lo resumo:

Código HTML :

<input type="button" onclick="miFade('hola')"/>

y el javascript

Código Javascript :

function miFade (texto) {
   $('#miDiv').fadeTo(1000, 0, function(){
        intro_contenido(texto)
   });
}

function intro_contenido (texto) {
   1º
   //Acciones del cambio de texto
   2º
   //Otro fade para aparecer
}

Un saludo.

Gracias de nuevo, cuando tenga un rato lo pruebo y te comento

Diossssss. mis ojos chirrían

he puesto "haber" en vez de "a ver"


Necesito unas vacaciones

Abducted escribió:

jiji te lo iba a decir por venganza a mis " y ; pero me he callado

Jejejeje, pues menos mal que me has dejado a mi, si no, me muero de la vergüenza

Perfecto!ya lo adapte a mi código y me funciona genial!

Muchas gracias