Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Text Crossfade

Tags:

jquery

I'm aware of various image crossfade plugins, but i need to crossfade text. Like, I have text A within a , a or a element and I want it to fade away while, fading in, B takes its place.

Any help really appreciated.

like image 224
pistacchio Avatar asked Jul 24 '09 14:07

pistacchio


2 Answers

Quick demo 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>
like image 141
redsquare Avatar answered Nov 13 '22 05:11

redsquare


VERY simple example

<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>
like image 45
Kane Wallmann Avatar answered Nov 13 '22 07:11

Kane Wallmann