JCP444
04-17-2011, 10:42 AM
I have this script which swaps an image using a fade.
It repeats. Is there a way to make the event happen only once.
Pretty new to JS, any help would be greatly apppreciated.
<html>
<head>
<script src="jquery.js">
</script>
<script>
function swapImages(){
var $active = $('#myGallery .active');
var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
setInterval('swapImages()', 3000);
});
</script>
<style>
#myGallery{
position:relative;
width:100px;
height:40px;
}
#myGallery img{
display:none;
position:absolute;
top:0;
left:0;
}
#myGallery img.active{
display:block;
}
</style>
</head>
<body>
<div id="myGallery">
<img src="finished buttons/blog_on.gif" class="active" />
<img src="finished buttons/blog_off.gif" />
</div>
</body>
</html>
It repeats. Is there a way to make the event happen only once.
Pretty new to JS, any help would be greatly apppreciated.
<html>
<head>
<script src="jquery.js">
</script>
<script>
function swapImages(){
var $active = $('#myGallery .active');
var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
setInterval('swapImages()', 3000);
});
</script>
<style>
#myGallery{
position:relative;
width:100px;
height:40px;
}
#myGallery img{
display:none;
position:absolute;
top:0;
left:0;
}
#myGallery img.active{
display:block;
}
</style>
</head>
<body>
<div id="myGallery">
<img src="finished buttons/blog_on.gif" class="active" />
<img src="finished buttons/blog_off.gif" />
</div>
</body>
</html>