I'm trying to fade an element in and out, but with a slight pause in between, it works without the pause, but when I add the pause using the jQuery delay()-function, it just stops after the first fadeOut();
Here's the code:
$('#headerimage2').each(function(){
for(i=1;i<50;i++){
$(this).fadeOut(1200).delay(1000).fadeIn(1000).delay(1000);
}
});
Why does the delay()-function (both first and second) break the loop?
Shot in the dark here, but are you sure you're using version 1.4 of the library. This is a new function as of that version.
Your code as posted works perfectly in firefox, safari, and chrome with the latest jquery:
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button>Run</button></p>
<div id='headerimage2' class="first"></div>
<script>
$("button").click(function() {
$('#headerimage2').each(function(){
for(i=1;i<5;i++){
$(this).fadeOut(100).delay(500).fadeIn(100).delay(500);
}
});
});
</script>
</body>
</html>