
[code]

    $(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);
    
    
        });
    });
    
[/code]

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


CC BY-SA 4.0
2018-08-08T15:13:33.973
47356
2018-08-08T20:32:57.487
2018-08-08T20:32:57.487
19110
29514
question
javascript jquery
jQuery で animate させているのに HTML に変化がない


[Animation Properties and Values](http://api.jquery.com/animate/#animation-
properties)によると、`.anitamte()`は[JQuery.Color](https://github.com/jquery/jquery-
color) pluginを使わないと、`background-color`をアニメーション化できないと記載されています。

以下のように、[JQuery.Color](https://github.com/jquery/jquery-color)
pluginを使う必要があります。

[code]

    $(function() {
    
      var duration = 300;
    
      $('#buttons1 button:nth-child(-n+4)')
        .on('mouseover', function() {
          $(this).stop(true).animate({
            backgroundColor: $.Color('#ae5e9b'),
            color: $.Color('#fff')
          }, duration);
        })
        .on('mouseout', function() {
          $(this).stop(true).animate({
            backgroundColor: $.Color('#fff'),
            color: $.Color('#ebc000')
          }, duration);
        });
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
    <div id="buttons1">
      <button>button1</button>
      <button>button2</button>
      <button>button3</button>
      <button>button4</button>
      <button>button5</button>
      <button>button6</button>
    </div>
[/code]


CC BY-SA 4.0
2018-08-08T20:29:16.357
47365
2018-08-08T20:29:16.357
29553
47356
answer