Javascript fade

off.the.walls

$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() < 350) {
$('.fixed_wrap').css("background-color", "rgba(0, 131, 170, 0.3)");
} else {
$('.fixed_wrap').css("background-color", "rgba(0, 131, 170, 1)");
}
});
});


Have this piece of code in order to change the opacity of a background. Only thing is that it catches very fast was wondering if there is anyway to make it fade slower on the change?

Procasinator

You could use fadeTo.

off.the.walls

Procasinator wrote: »

You could use fadeTo.

Where would i place it in the code? thats the part im a bit confused about. would I use it instead of the else?

Procasinator

You could write it a few ways. Maybe like this:

$(document).ready(function() {
    // If fixed_wrap is never removed/added to DOM, cache the results. 
    var fixedWrap = $('.fixed_wrap');
    
    $(window).scroll(function() {
        var opacity = $(this).scrollTop() < 350 ? 0.3 : 1;
        fixedWrap.fadeTo('fast', opacity);
    });
});

off.the.walls

Procasinator wrote: »

You could write it a few ways. Maybe like this:

$(document).ready(function() {
    // If fixed_wrap is never removed/added to DOM, cache the results. 
    var fixedWrap = $('.fixed_wrap');
    
    $(window).scroll(function() {
        var opacity = $(this).scrollTop() < 350 ? 0.3 : 1;
        fixedWrap.fadeTo('fast', opacity);
    });
});

Problem with that is that it fades everything inside the div. I'm only looking too fade the background.

28064212

First google result for jquery fade background: http://stackoverflow.com/questions/967815/how-do-you-fade-in-out-a-background-color-using-jquery

Procasinator

If you have jQuery UI/jQuery Color, you can just change you call to css to animate in your existing code.

Giblet

I would use CSS transitions for this only if possible.

//CSS
.fixed_wrap.fade { background-color: rgba(0, 131, 170, .3) ; }
.fixed_wrap { background-color: rgba(0, 131, 170, 1); transition:background-color linear .2s; }

//Script
$(window).scroll(function() {
    var fade = $(this).scrollTop() < 350;        
    $('.fixed_wrap').toggleClass('fade',fade);  
});

You could remove the dependency on jQuery as well with this method using the classList property on DOM elements.

off.the.walls

$(window).scroll(function() {

if($(window).scrollTop() > 500){

$('.fixed_wrap').css('background','rgba(0, 131, 170, 1)')

}

else if ($(window).scrollTop() < 500){
$('.fixed_wrap').css().stop().animate({"rgba":"(0,131,170,0.3)"},1000)
}


});



thats the code I went with in the end. the css doesn't seem to be working for me.

off.the.walls

So really wasn't happy with the way this was working.

What I did was set the css3 using -webkit transitions and stuff to switch between an background rgba

Then I used a toggle function too add a class to the div in order to change its height slightly and the background opacity to full.

Thought i'd post up the solution in case anyone else wanted to do this.