animate element during scroll – pleaaase help!

[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’
});
} ) );

[Author]

Posts