CODEWITHSUNDEEP
javascriptjqueryeasing
Ignasi
Ignasi

Reputation: 631

JQuery SlideToggle() execute function every step of the easing

Is there any way to execute an already defined function on javascript everytime a modification occurs in the animation of the easing of the slideToggle() function?

Example:

SlideToggle("1000", "linear", functiontoexecute())

I would like functiontoexecute() to execute every step it occurs on the "linear" easing.

I have already looked on JQuery webpage for .slideToggle() and tried to use "progress" or "step" options... but either they don't perform as expected or I didn't use them properly...

For more details I am using JQuery 1.9.1

Upvotes: 0

Views: 1800

Answers (1)

Shakespeare
Shakespeare

Reputation: 1286

The jQuery documentation on how to use those parameters isn't the best, as none of the examples use it to its full capabilities. Here's an example using the progress function, but hopefully you can adapt this to whatever your needs are: -

$("#book")
  .slideToggle({
    duration: 400,
    progress: functionToExecute,
    complete: function () {
      console.log('animation completed');
    }
  });

function functionToExecute(animation, progress, remainingMs) {
  $('p').text('here and progress count is ' + progress);
}
.wrap {
  height: 100px;
  width: 200px;
  margin: 10px 10px 10px 10px;
  background-color: #2d8cd0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap" id="book">
  <h2>1</h2>
</div>

<p>Progress: <span id="progress">0</span></p>

Upvotes: 6

Related Questions