Jquery animate div opacity on scroll

Question

So I'm trying to animate a css property based on scrolling the browser window. the code below works so far, but I'd like it to have a transition instead of just abruptly snapping from an opacity of 1 to an opacity of 0.5. any help is appreciated. thanks in advance.

$(document).ready(function(){
$(window).scroll(function(){
    if ($(window).scrollTop() > 50){
        $('.header').css('background','rgba(200, 54, 54, 0.5)');
    }
    else if ($(window).scrollTop() < 50){
        $('.header').css('background','rgba(200, 54, 54, 1)');
    }
});

});

Here is a jsfiddle link to the code so far

Abraham Uribe · Accepted Answer · 2013-06-28 16:19:22Z

2

you can do

 $(window).scroll(function(){
    if ($(window).scrollTop() > 50){
        $('.header').css('background','rgb(200, 54, 54)').stop().animate({"opacity":".5"},1000)
    }
    else if ($(window).scrollTop() < 50){
        $('.header').css('background','rgb(200, 54, 54)').stop().animate({"opacity":"1"},1000)
    }
});

http://jsfiddle.net/XXjZW/2/

answered Jun 28, 2013 at 16:19

Abraham Uribe

3,1187 gold badges28 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Over a year ago

Thanks. this code and the following example work great, but it brings me to another question. How can i animate the background opacity with affecting the h1 tag inside the header div?

Jonathan Naguin · Accepted Answer · 2013-06-28 16:18:50Z

1

You can use the CSS3 property transition:

.header{
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s;
}

answered Jun 28, 2013 at 16:18

Jonathan Naguin

14.8k7 gold badges52 silver badges76 bronze badges

Comments

Aldi Unanto · Accepted Answer · 2013-06-28 16:23:45Z

1

give your css transition ->

transition:background 1s;

http://jsfiddle.net/XXjZW/6/

answered Jun 28, 2013 at 16:23

Aldi Unanto

3,6821 gold badge25 silver badges31 bronze badges

Comments

Alvaro · Accepted Answer · 2013-06-28 16:29:05Z

1

If you want compatibility with browsers which don't suppor CSS3, I would recommend you to make use of jQuery UI library:

  $('.header').animate({
      backgroundColor: "#aa0000"
  }, 1000);

Living example: http://jsfiddle.net/XXjZW/8/

You will need to include it as you include jQuery library:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

answered Jun 28, 2013 at 16:29

Alvaro

41.7k32 gold badges175 silver badges352 bronze badges

Collectives™ on Stack Overflow

Jquery animate div opacity on scroll

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related