CODEWITHSUNDEEP
jquerydelayfadeinfadeout
Rakward
Rakward

Reputation: 1717

JQuery delay()-function breaks loop?

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?

Upvotes: 1

Views: 865

Answers (2)

Bosh
Bosh

Reputation: 8758

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>

Upvotes: 1

BradBrening
BradBrening

Reputation: 5518

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.

Upvotes: 4

Related Questions