Callback function to be executed after jQuery show / hide?

In iOS, the following code has a noticeable flicker between the hide() and the scrollBy():

element.hide();
window.scrollBy(0, -elementHeight);

This is because toggling between display: none and display: block on iOS is a heavy task, as if the elements are being added to and removed from the DOM.

I need a way to perform window.scrollBy() as a callback, once the hide() has successfully completed and the DOM has updated. Is there a way to do this in jQuery?

Answers:

Answer

Either pass a duration and a callback, or just pass a callback option, like this:

element.hide(0, some_function);

// or 

element.hide({done: some_function});

By default, the second option takes 400 ms. To do it immediately, use one of these:

element.hide(0, some_function);

// or 

element.hide({duration: 0, done: some_function});

Here's a jsFiddle demo.

See the jQuery documentation for more details.

Answer

From the jQuery api:

.hide(options)

complete Type: Function() A function to call once the animation is complete.

Try this:

element.hide({complete: function(){ window.scrollBy(0, -elementHeight); });

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.