HTML has not changed even though jQuery animates it.

$(function(){

  var duration = 300;

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


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


    });
});

There is no change in HTML has not changed.Is there anything grammatical about it?

javascript jquery

2022-09-29 21:55

1 Answers

According to Animation Properties and Values, Animation Properties and Values cannot be used without color.

You must use JQuery.Color plugin as follows:

$(function(){

  var duration = 300;

  $('#buttons1button:nth-child(-n+4)')
    .on('mouseover', function(){
      $(this).stop(true).animate({
        backgroundColor: $.Color('#ae5e9b'),
        color:$.Color('#ffff')
      }, duration);
    })
    .on('mouseout', function(){
      $(this).stop(true).animate({
        backgroundColor: $.Color('#ffff'),
        color:$.Color('#ebc000')
      }, duration);
    });
});

<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>
<divid="buttons1">
  <button>button1</button>
  <button>button2</button>
  <button>button3</button>
  <button>button4</button>
  <button>button5</button>
  <button>6</button>
</div>

2022-09-29 21:55

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656