CODEWITHSUNDEEP
jquery
Washington Guedes
Washington Guedes

Reputation: 4365

Execute fadeIn callback only once

I did this small example to simulate my problem:

$(document).ready(function(){
  var callback = function(){
    output.innerHTML += '<br>Fade example finished !!';
  };
  $('.fade').fadeOut('fast').fadeIn(callback);
});
div {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fade">Fade example</div>
<div class="fade">Fade example</div>
<div class="fade">Fade example</div>
<div id="output">Output: </div>

As you can see, the fadeIn callback executes once per div.

However I want it to run only once for all '.fade' elements.

Is there any property I can set, so the callback is executed only once?

Upvotes: 0

Views: 387

Answers (2)

Gabriel Bueno
Gabriel Bueno

Reputation: 520

Jquery one may be useful in this particular case.

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

From jQuery documentation.

Read more jQuery documentation about one here http://api.jquery.com/one/

Upvotes: 0

web developer
web developer

Reputation: 126

you could use "when" in this scenario.

$(document).ready(function(){
  var callback = function(){
    output.innerHTML += '<br>Fade example finished !!';
  };
  $.when($('.fade').fadeOut('fast').fadeIn()).then(function () {
 callback();
});
});

Upvotes: 1

Related Questions