<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Simple fadein fadeout jQuery fade</title>
<link rel='stylesheet' href='css/style.css'>
<style>
#fade {
margin: 80px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#fade > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#fade > div:gt(0)").hide();
setInterval(function() {
$('#fade > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#fade');
}, 3000);
});
</script>
</head>
<body>
<div id="fade">
<div>
<img src="images/smile.jpg" alt="img1">
</div>
<div>
<img src="images/smile1.jpg" alt="img2">
</div>
<div>
satish mallick
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset='UTF-8'>
<title>Simple fadein fadeout jQuery fade</title>
<link rel='stylesheet' href='css/style.css'>
<style>
#fade {
margin: 80px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#fade > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#fade > div:gt(0)").hide();
setInterval(function() {
$('#fade > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#fade');
}, 3000);
});
</script>
</head>
<body>
<div id="fade">
<div>
<img src="images/smile.jpg" alt="img1">
</div>
<div>
<img src="images/smile1.jpg" alt="img2">
</div>
<div>
satish mallick
</div>
</div>
</body>
</html>
Hello,
No comments:
Post a Comment