I am currently working on a function that animates the opacity of an element to 0 as the user scrolls. However, I am facing an issue where the element is fading out too early instead of waiting for the animation to finish. Here is a link to my jsFiddle showcasing the problem: http://jsfiddle.net/6hcm4qg4/
Here is the code snippet from my markup:
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var height = $(window).height();
var myEvent = function() {
$('.logo_container, .slogan').css({
'opacity': ((height - scrollTop) / height)
});
};
$.when(myEvent()).done(function() {
$('.logo_container, .slogan').fadeOut();
});
});
If anyone has any suggestions or fixes for this issue, I would greatly appreciate it!