Conozco varios image plugins de crossfade, pero necesito hacer un fundido cruzado de texto. Me gusta, tengo el texto A dentro de un elemento, y quiero que se desvanezca mientras, desvaneciéndose, B toma su lugar.jQuery Text Crossfade
Cualquier ayuda realmente apreciada.
Demostración rápida here.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#test').fadeOut(2000);
$('#test1').fadeIn(2000);
});
</script>
<style>
h1 {font-size:12em;position:absolute; left:0;top:0}
#test1 {display:none}
</style>
</head>
<body>
<h1 id="test">A</h1>
<h1 id="test1">B</h1>
</body>
</html>
ejemplo muy sencillo
<div>
<div style="position:absolute;" id="div1">Hello</div>
<div style="position:absolute;" id="div2">World</div>
</div>
<script>
$("#div2").hide();
$("#div2").fadeIn(3000);
$("#div1").fadeOut(3000);
</script>
Solo para asegurarse de que fadeIn/FadeOut se realice en secuencia, es posible que desee hacer algo de la siguiente manera: $ ("# div2"). FadeIn (3000); $ ("# div1"). Retraso (3001) .fadeOut (3000); – matthewdunnam
@Matt: De hecho, 'fadeIn' acepta una' devolución de llamada' por lo que no es necesario 'retrasar'. –
maravilloso servicio al autor de la pregunta, pero no a SO. El enlace a la demostración rápida debe acompañar a la respuesta, no ser la respuesta. –
Y usted es el juez y el jurado – redsquare
Para ser justos, tiene 8 votos favorables y usted no tiene ninguno ... – Basic