I'm having trouble getting .animate() to work

Question

Link: https://jsfiddle.net/nbonne/9hcoy9j8/

I aim is to have the medium blue box and everything in it move up when the search button is pressed.

I know my selector is for "form" and it's trying to change the background, I'm having trouble getting anything to animate.

I think this is the correct way to accomplish it but nothing happens:

$("#search-btn").click(function{
    $("controls-main").animate({
        background: "red"
    }, 500);
})

Possible duplicate of [jQuery animate backgroundColor](http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) — CBroe, Apr 29 '17 at 23:00

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

0

jQuery on its own can't animate colors. You need another library like jQuery UI. See this SO answer for more information.

edited May 23 '17 at 12:10

Community

1
1

answered Apr 29 '17 at 22:49

Hydrothermal

4,851
7
26
45

score 0 · Accepted Answer · answered Apr 29 '17 at 22:51

In the fiddle:

Second click handler was missing parentheses (syntax error in console)
s-form class was missing from your form html code (empty selector)
$('search') is a wrong selector. You probably wanted $('[name=search]');
You are animating background, which jQuery's animate doesn't animate.

Updated working fiddle: https://jsfiddle.net/9hcoy9j8/18/

$(document).ready(function() {
  $(".rand-wiki").click(function() {
    window.open("https://en.wikipedia.org/wiki/Special:Random");
  });
  $(".s-form").on('click', function () {
    $("[name=search]").animate({
      marginTop: '40px'
    }, 500);
  });
});

Thanks a lot. Any idea why its not working in Chrome or Edge? — Nick Bonne, Apr 30 '17 at 20:16
@NickBonne I tested in Chrome (the updated fiddle - works for me). — BluePill, May 01 '17 at 11:20

I'm having trouble getting .animate() to work

2 Answers2