jquery box-shadow not applied

Question

I have this code:

$("#my_div").animate({
      "margin-left": "-145px",
      "background-color": "#ffffff",
      "width": "1240px",
      "padding": "6px 6px 6px 6px",
      "border-radius": "6px",
      "box-shadow": "0px 0px 9px #323232",
      "-webkit-box-shadow": "0px 0px 9px #323232"
}, 1000);

But the box-shadow and padding styles aren't applied. I can't spot the error...

For CSS property, you can only animate one single value. e.g, you should use padding-left,padding-top,etc... — A. Wolff, Sep 19 '13 at 13:30

score 0 · Answer 1 · edited May 23 '17 at 10:25

Try this:

$("#my_div").animate({
      "margin-left": "-145px",
      "background-color": "#ffffff",
      "width": "1240px",
      "padding": "6px 6px 6px 6px",
      "border-radius": "6px",
      boxShadow: "0px 0px 9px #323232", //change here
      paddingTop:'6px',
      paddingLeft:'6px',
      paddingRight:'6px',
      paddingBottom:'6px',
}, 1000);

Reference: Correct way to animate box-shadow with jQuery

jquery box-shadow not applied

1 Answers1