Search code examples
jqueryhyperlinkfadeinfadeout

Timed jquery fadeout - creating links


I found this cool jquery fade in/fade out script, but I can't quite figure out how to alter the script to make the text an href link (I want to use it as a news ticker). I've spent hours fiddling but my jquery isn't up to par. For example I've tried to put <a href="#">test line 1</a> in a textContent div but the link does not appear. Link below and code copied to post for convenience. Any suggestions? I'm open to other ideas, but the fade effect is cool and I would like to keep that! Thanks for any assistance!

http://jsfiddle.net/mplungjan/bWD4V/

<style type="text/css">
    div.textContent { display:none }
</style>

<div id="textMessage"></div>
<div class="textContent">test line 1 </div>
<div class="textContent">test line 2</div>

<script>
var cnt=0, texts=[];

// save the texts in an array for re-use
$(".textContent").each(function() {
texts[cnt++]=$(this).text();
});
function slide() {
  if (cnt>=texts.length) cnt=0;
  $('#textMessage').html(texts[cnt++]);
  $('#textMessage')
    .fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow', 
     function() {
       return slide()
     }
  );      
}      
slide()
</script>

Solution

  • You need to use "html" instead of "text":

    var cnt=0, texts=[];
    
    // save the texts in an array for re-use
    $(".textContent").each(function() {
      texts[cnt++]=$(this).html();
    });
    function slide() {
      if (cnt>=texts.length) cnt=0;
      $('#textMessage').html(texts[cnt++]);
      $('#textMessage')
        .fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow', 
         function() {
           return slide()
         }
      );      
    }      
    slide()
    

    Fiddle: http://jsfiddle.net/bWD4V/132/