Forums

Sami

Hey Guys - been racking my brains for the last day or so trying to get this to work. im pretty new to jquery so forgive me if this is really simple.

i want to be able to set the opacity of an element to 1 during scrolling, and for it to set back to 0.5 when the user stops scrolling.

is this possible?

heres what ive got so far - for give me if its completely wrong -

CSS:

.sidetiggeriphone {opacity:0.5}

JS:

    $(document).ready(function() {

  $(window).scroll(function () { 

    $('.sidetiggeriphone').animate({
      opacity: '1'
    });
  });

});

TheDoc

It's almost there. You just need to figure out a callback for when the user has stopped scrolling.

JohnMotylJr

@Sami,

This isnt the answer but this may help you.

http://jsfiddle.net/hYsRh/4/

Resource: http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling

wmwood

I'm not sure if you're looking for the answer or hints.... so forgive me lol!

$(window).scroll($.debounce( 250, true, function(){
  $('.sidetiggeriphone').animate({
    opacity: '1'
  });
} ) );

$(window).scroll($.debounce( 250, function(){
  $('.sidetiggeriphone').animate({
    opacity: '0.5'
  });
} ) );

treehouse : what would you like to learn today?

Forums

animate element during scroll - pleaaase help!