Toggle a class using waypoints
<pre><code> var $foo = $("#foo");

 $foo.waypoint(function(){
    $(this).addClass("blue").removeClass("red");  
     $.notify(this.id + 'hit');
 },{offset:'25%'});

 $foo.waypoint(function(){
     $(this).addClass("red").removeClass("blue");      
 },{offset:'24%'});

 $foo.waypoint(function(){
     $(this).addClass("blue").removeClass("red");       
 },{offset:'74%'});

 $foo.waypoint(function(){
     $(this).addClass("red").removeClass("blue");      
 },{offset:'75%'});


 &lt;div id="foo" class="blue"&gt;
  First Panel
 &lt;/div&gt;
</code></pre>

<p>For a start the class in question fails to toggle. Moreover, <code>$.notify(this.id)</code> returns undefined for me?</p>

<p><code>$.notify(this.element.id)</code> IS defined.</p>

<p>Is this something to do with the nature of chaining methods in the waypoint API? If so, how do I overcome it?</p>

<p>Solution:</p>

<pre><code>$('#foo').waypoint(  
 function(direction) {
        $('#foo').toggleClass('fadeInLeft');
}, { offset: '50%'}); // toggle at 50% from top viewport
$('#foo').waypoint(  
 function(direction) {
        $('#foo').toggleClass('fadeInLeft');
}, { offset: '-400'}); // toggle again a further 400px down
</code></pre>