jQuery で animate させているのに HTML に変化がない

$(function() {

  var duration = 300;

  $('#buttons1 button:nth-child(-n+4)')
    .on('mouseover', function() {
      $(this).stop(true).animate({
        backgroundColor: '#ae5e9b',
        color: '#fff'
      }, duration);


    })
    .on('mouseout', function() {
      $(this).stop(true).animate({
        backgroundColor: '#fff',
        color: '#ebc000'
      }, duration);


    });
});

HTML に変化がありません。文法的におかしいところはありますか。