Triggering jQuery after waypoints

Question

I would like to fadeIn a container after wayoints is triggered. I tried to just delay the fadeIn, but it seems like waypoints is always triggered last.

So instead of fading in the container after 2000ms, the container fades in and instantly hides after fading in. If i comment out the waypoints line for hiding the container, everything is working fine.

I hope I described the problem in a descent way. Many thanks!

Here's the code:

$('#skrollr > div').waypoint(function(direction) {
    $('.content-boxes').fadeOut(500);
}, {
    offset: $.waypoints('viewportHeight') / 3
});

$('.special-link').click(function (event) {
    $('.team .content-boxes').delay(5000).fadeIn(500);
});

and the special-link is looking like this:

<a href="#team" class="special-link">Link</a>

No matter how I edit the "special-link", it always fades out afterwards :(

Answer 1

var waypoint_click = false;
$('.special-link').click(function(event) {
    if (waypoint_click) {
        clearTimeout(waypoint_click);
    }
    waypoint_click = setTimeout(function() {
        $('.team .content-boxes').delay(100).fadeIn(500);
    }, 3000);
});

It's working now with a timer :)