Search in This Blog

Display content with delay in jquery

Display content with delay in jquery

Some time you want to show some data with delay, then use the listed below code:

<!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" />
<title>Display content with delay</title>
<style>
.my-class {
    display: none;
}
</style>
<script language="javascript" src="jquery-1.10.2.js" type="text/javascript"></script>
</head>
<body>
<div class="my-class">
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
</body>
<script>
$(document).ready(function() {
$('.my-class').delay(1000).fadeIn(3500);
});
</script>
</html>
Previous
Next Post »