Using Jquery animate for simple css changes

Question

I would like to do this using .animate instead of .css. When I change it to animate it gets glitchy and won't work

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop != 0) {
    $('#test_box').css({
      "background-color": "red",
      "height": '400px'
    });
  } else {
    $('#test_box').css({
      "background-color": "blue",
      "height": "200px"

    });
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test_box" style="height: 200px; width: 200px; background-color: red;"></div>

You will need jQuery-UI or other library to have a color animate effect — Hemal
– Hemal, Commented Dec 31, 2015 at 5:55

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

For animating effect of increasing the height and decreasing the height of the div use

transition: height 2s;

This make the transition smooth.

Here is the working fiddle which might be useful.

Fiddle

-- Help :)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 31, 2015 at 5:50

Help

1,1567 silver badges11 bronze badges

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

Comments

Hemal · Accepted Answer · 2015-12-31 05:57:43Z

1

The following code with background-color animation will only work if you include jQuery-UI library also(FOR COLOR EFFECT ONLY)

$(window).scroll(function() {
      var scrollTop = $(window).scrollTop();
      if (scrollTop != 0) {
        $('#test_box').animate({
          "background-color": "red",
          "height": '400px'
        },500);
      } else {
        $('#test_box').animate({
          "background-color": "blue",
          "height": "200px"

        },500);
      }

    });

answered Dec 31, 2015 at 5:57

Hemal

3,7722 gold badges27 silver badges57 bronze badges

Comments

Divesh Oswal · Accepted Answer · 2015-12-31 06:11:31Z

1

The .animate() method allows us to create animation effects on any numeric CSS property. for more reference check http://api.jquery.com/animate/

it will not change background color.

example: here only height & width property are changing..

code is updated.. using jquery ui, color also changing...

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop != 0) {
    $('#test_box').animate({
      "background-color": "red",
      "height": '1500px',
      "width": '200px'
    });
  } else {
    $('#test_box').animate({
      "background-color": "blue",
      "height": "700px",
      "width": '500px'

    });
  }

});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="test_box" style="height: 900px; width: 200px; background-color: red;"></div>

edited Dec 31, 2015 at 6:11

answered Dec 31, 2015 at 5:54

Divesh Oswal

2503 silver badges13 bronze badges

1 Comment

Hemal Over a year ago

You will need jQuery-UI or other library to have a color animate effect

Widada · Accepted Answer · 2015-12-31 05:57:41Z

0

for make the animation good working, you must increase the high of div. because $(window).scrollTop() will be work if page can scroll.

fiddle example

answered Dec 31, 2015 at 5:57

Widada

6052 gold badges5 silver badges17 bronze badges

Comments

Tim Vermaelen · Accepted Answer · 2015-12-31 06:21:03Z

You'll need an additional library to support color animations with jQuery. This one looks pretty decent:

http://www.bitstorm.org/jquery/color-animation/

For your animation to work smoothly you might want to clear the queue with the .stop(true, false) function.

$(window).scroll(function() {
    var cssObj = $(window).scrollTop() === 0 ? {
            backgroundColor: 'blue',
            height: 200
        } : {
            backgroundColor: 'red',
            height: 400
    };

    $('#test_box').stop(true, false).animate(cssObj, {
        duration: 1000,
        easing: 'linear'
    });
});

DEMO

I must say it's more easy to use CSS transitions as other people mentioned. Simply toggle a css class to give the #test_box a state, let's say 'scrolled'.

$(window).scroll(function() {
    $('#test_box').toggleClass('scrolled', $(window).scrollTop() !== 0);
});

Collectives™ on Stack Overflow

Using Jquery animate for simple css changes

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related