Geek asks and answers

How to add fade effect when changing CSS using jQuery

I fake a fixed position for a footer on a mobile site for mobile browsers that do not support a fixed position. (iOS to iOS 5, Andriod to 2.2, etc.)

Here is the jQuery code I'm using that works well and does what I want:

function changeFooterPosition() {   
  $('.not-fixed').css('top', window.innerHeight + window.scrollY - 56 + "px");
}

$(document).bind('scroll', function() {
  changeFooterPosition();
});

So it works.

My question is that I want to add a little delay to it, and the footer will disappear, and not just click quickly after every small scroll. I looked around and found the following methods that I could use, but I'm not sure if they are correct or where to add them in js above.

.delay(1000).fadeTo('slow', 1)

I know that this functionality exists in jQuery Mobile, but I do not want to use all of jQuery Mobile for this little thing.

Thanks in advance.

+3
3

http://api.jquery.com/animate/

, .

function changeFooterPosition() {   
  $('.not-fixed').animate({'top': window.innerHeight + window.scrollY - 56 + "px"}, 2000);
}

$(document).bind('scroll', changeFooterPosition);
0

$(document).bind('scroll', function() {
  changeFooterPosition();
}); 


$(document).bind('scroll', changeFooterPosition); 


$('.not-fixed').css('top', window.innerHeight + window.scrollY - 56 + "px");


var WantedSpeed = 2000;
$('.not-fixed').delay(1000).animate({
    top: window.innerHeight + window.scrollY - 56 + "px"
}, WantedSpeed, function() {
    // Animation complete.
})
0

What you want to do is throttle the scroll callback:

(function() {
  var scrollTimer = 0,
      $notFixed = $('.not-fixed');

  function changeFooterPosition() {   
    $notFixed.css('top', window.innerHeight + window.scrollY - 56 + "px").show(300);
  }

  $(document).bind('scroll', function() {
    $notFixed.hide();
    clearTimeout(scrollTimer);
    setTimeout(changeFooterPosition, 50);
  });
}());
0
source

More articles:


All Articles