slideshow message

by slawe

HTML

<div id='my_annotation'>
  <div class="match active">
    <div class='impression'>
      <h4>User 1</h4>
      I need a babysitter for tonight...
    </div> 
  </div>
  <div class="match active">
    <div class='impression'>
      <h4>User 2</h4>
      Anyone for a tennis match today?
    </div>
  </div>
  <div class="match active">
    <div class='impression'>
      <h4>User 3</h4>
      I am a math tutor, need help?
    </div>
  </div>
  <div class="match active">
    <div class='impression'>
      <h4>User 4</h4>
      Urgently need a plumber!!!
    </div>
  </div>
</div>

CSS

#my_annotation .match .impression{
    display: none;
  }

JavaScript

$(function() {
  balloon_switch();
});

function balloon_switch() {
  var $match = $("#my_annotation .active").first();
  match_animate($match);
  $match.removeClass('active');
  var $next = $match.next();
  if ($next.length == 0) $next = $("#my_annotation").children().first();
  $next.addClass('active');
  setTimeout("balloon_switch()", 5000);
}

function match_animate(match) {
  match.show().delay(4000).animate({opacity: 'hide'}, 'slow');
  match.children(".impression").delay(500).animate({opacity: 'show'}, 'slow').delay(1500).hide();
  setTimeout("pulsate_match()", 1500);
}

function pulsate_match() {
  $("#match").animate({opacity: 'show'}, 150).delay(150).animate({opacity: 'hide'}, 150).delay(150)
  .animate({opacity: 'show'}, 150).delay(150).animate({opacity: 'hide'}, 150);
}