How to setInterval effect with JavaScript
Use the JavaScript setInverval function to create a cool effect
I’m going to use jQuery to create the animation using fadeIn and fadeOut functions.
function my_effect() {
/* Do something here */
$('.first').fadeOut('slow')
$('.first').fadeIn('slow')
/* Set the function and the time */
setInterval(my_effect(), 2000);
};
/*Call the function. Then it will start after loading the page */
my_effect();
/* Do something here */
$('.first').fadeOut('slow')
$('.first').fadeIn('slow')
/* Set the function and the time */
setInterval(my_effect(), 2000);
};
/*Call the function. Then it will start after loading the page */
my_effect();
Full Code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example 16 | CodeGround</title>
</head>
<body>
<h1 class="first">Hello World!</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function my_effect() {
$('.first').fadeOut('slow')
$('.first').fadeIn('slow')
setInterval(my_effect(), 2000);
};
my_effect();
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example 16 | CodeGround</title>
</head>
<body>
<h1 class="first">Hello World!</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function my_effect() {
$('.first').fadeOut('slow')
$('.first').fadeIn('slow')
setInterval(my_effect(), 2000);
};
my_effect();
</script>
</body>
</html>
Related PostsIf you liked How to setInterval effect with JavaScript; the posts below might interest you too:
|
