I need only background-color:red; to appear and disappear smoothly background-color:red; , and not a whole block, as in my example.

  $("#button_1").click(function() { $("#div3").fadeIn(2000); }); $("#button_2").click(function() { $("#div3").fadeOut(2000); }); 
 #div3 { width: 100px; height: 100px; display: none; background-color: red; font-weight: bold; text-align: center; } .but { text-align: center; font-weight: bold; border: 1px solid #00748f; height: 25px; width: 100px; background-color: #0483a0; cursor: pointer; color: #FFF; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="but" id="button_1">Показать</div> <br> <div class="but" id="button_2">Скрыть</div> <br> <div id="div3">Текст</div>

    1 answer 1

    Then so:

     <style type="text/css"> #div3 { background-color: transparent; width: 100px; height: 100px; } .but { background-color: #0483a0; border: 1px solid #00748f; color: #FFF; cursor: pointer; font-weight: bold; text-align: center; width: 100px; height: 25px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="but" id="button_1">Показать</div> <div class="but" id="button_2">Скрыть</div> <div id="div3">Текст</div> <script type="text/javascript"> $('#button_1').click(function() { $('#div3') .css('background-color', 'red') .css('transition', '2s'); }); $('#button_2').click(function() { $('#div3') .css('background-color', 'transparent') .css('transition', '2s'); }); </script>