I'm experimenting with CSS3 transitions and am trying to use the addition of a class via jQuery to trigger the transition. In this case, I want the class added, and thus the transition to happen, when scrolling begins. So:
- $(document).ready(function(){
-
- $(window).scroll(function(){
- var $theTop = $( 'body' ).scrollTop()
- if ( $theTop > 2) {
- $('#falling-man').addClass( 'drop' );
- }
- else {
- $('#falling-man').removeClass( 'drop' );
- }
-
- });
- });
This is working in Safari and Chrome, but I can see in Firefox the class is not being added.
I'm pretty new to jQuery, so not sure what wrong.
As a side issue, I first tried using toggleClass, but it seemed to fire continually, causing weird behavior -- so I tried add and remove and it worked better.