$(document).ready(function () {
var data = {
reviews: [
{
review: "It was okay..."
},
{
review: "Poor, 0 stars"
},
{
review: "Beyond Excellent, 10 stars!"
}
]
};
$.each(data.reviews,function(i,itemData){
var p = $('<p>').text('"'+itemData.review+'"');
if (i == 0) p.addClass('active');
else p.css({opacity: 0.0});
$('#reviews').append(p);
});
function showNextReview() {
var $active = $('#reviews p.active');
if ( $active.length == 0 ) $active = $('#reviews p:last');
var $next = $active.next().length ? $active.next() : $('#reviews p:first');
$active.removeClass('active').animate({opacity: 0.0}, 1000, function(){
$active.hide();
$next.show().addClass('active').animate({opacity: 1.0}, 1000);
});
}
setInterval(showNextReview, 5000 );
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script language="javascript">
$(document).ready(function() {
var data = { "reviews": [{ "review":"It was okay..." }, { "review": "Poor, 0 stars" }, { "review": "Beyond Excellent, 10 stars!"}]};
/*
$.each(data.reviews,function(i,itemData){
var p = $('<p>').text('"'+itemData.review+'"');
if (i == 0) p.addClass('active'); else p.css({opacity: 0.0});
$('#reviews').append(p);
});
*/
$("p:first", "#reviews").addClass("active").css({"opacity":1.0});
$("p:not(:first)", "#reviews").removeClass("active").css({"opacity":0.0});
setInterval("showNextReview();", 5000 );
});
function showNextReview() {
$("p.active").animate({"opacity":0.0}, 1000, function() {
if( $(this).removeClass("active").next().length != 0 ) {
$(this).removeClass("active").next().addClass('active').animate({"opacity": 1.0}, 1000);
}
else {
$(this).removeClass("active");
$("p:first").addClass('active').animate({"opacity": 1.0}, 1000);
}
});
}
</script>
</head>
<body>
<div id="reviews">
<p>This should fade in first and then fade out</p>
<p>This should fade in once the first one fades out and so on...</p>
<p>This should fade in once the second one fades out and so on...</p>
</div>
</body>
</html>
showNextReview();
$(document).ready(function() {
$("p", "#reviews").css({"position":"absolute","top":"0px","left":"0px"}).removeClass("active").hide();
showNextReview();
});
function showNextReview() {
$active = ($("p.active").length>0)?$("p.active"):$("p:first");
$next = ($active.next().length>0)?$active.next():$("p:first");
$active.fadeOut(1000, function() { $(this).removeClass("active"); });
$next.fadeIn(1000, function() { $(this).addClass("active"); });
setInterval("showNextReview();", 5000);
}
$(document).ready(function() {
$("p", "#reviews").css({"position":"absolute","top":"0px","left":"0px"}).removeClass("active").hide();
showNextReview();
});
function showNextReview() {
$active = ($("p.active").length>0)?$("p.active"):$("p:first");
$next = ($active.next().length>0)?$active.next():$("p:first");
$active.fadeOut(1000, function() { $(this).removeClass("active"); });
$next.fadeIn(1000, function() { $(this).addClass("active"); });
setTimeout("showNextReview();", 5000);
}
$(document).ready(function() {
$("p", "#reviews").css({"position":"absolute","top":"0px","left":"0px"}).removeClass("active").hide();
showNextReview();
setInterval("showNextReview();", 5000);
});
function showNextReview() {
$active = ($("p.active").length>0)?$("p.active"):$("p:first");
$next = ($active.next().length>0)?$active.next():$("p:first");
$active.fadeOut(1000, function() { $(this).removeClass("active"); });
$next.fadeIn(1000, function() { $(this).addClass("active"); });
}
This is a very good tutorial that includes p tags.
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/