Блог

У меня есть div в форме круга с class = «complete-button» (высота / ширина = 27 пикселей, радиус границы = 12 пикселей). Я хотел бы изменить цвет фона этого div по щелчку, начиная с центра и расширяясь наружу с небольшим ослаблением.

Какой наиболее эффективный подход для этого? Я видел несколько сообщений, в которых это достигается с помощью css при наведении курсора мыши (с использованием селекторов before и after), но я еще недостаточно подкован, чтобы преобразовать эту идею в jQuery по щелчку мыши. Будем признательны за любую помощь!

Используйте этот CSS:

 div.button:after {
  content: '';                 /* needed for rendering */
  position: relative;          
  display: block;              /* so we can set width and height */
  border-radius: 50%;
  height: 0%;
  width: 0%;
  margin: auto;                /* center horizontally */
  background: red;
  top: 50%;                    /* center vertically */
  transform: translateY(-50%); /* center vertically */
  transition: 1s;
}

div.button.selected:after {
  height: 100%;
  width: 100%;
}
  

Затем переключаем selected класс по щелчку.

Фрагмент

 $('div').click(function() {
  $(this).toggleClass('selected');
});  

 div.button {
  height: 27px;
  width: 27px;
  border-radius: 50%;
  background: green;
}

div.button:after {
  content: '';                 /* needed for rendering */
  position: relative;          
  display: block;              /* so we can set width and height */
  border-radius: 50%;
  height: 0%;
  width: 0%;
  margin: auto;                /* center horizontally */
  background: red;
  top: 50%;                    /* center vertically */
  transform: translateY(-50%); /* center vertically */
  transition: 1s;
}

div.button.selected:after {
  height: 100%;
  width: 100%;
}  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">

</div>  

Вы определяете свои эффекты перехода в css и используете js для выполнения простого переключения классов.

Поиграйте с этим в codepen

HTML:

 <button class="myButton">My Button</button>
  

css:

 .myButton{
  margin-left:auto;
  margin-right: auto;
  display: block;

  transition: background-color,height,width 0.5s ease;

  background-color: red;
  height: 100px;
  width: 100px;
  border-radius: 49px;

}

.myButton.on{
  background-color: yellow;
  height: 120px;
  width: 120px;
  border-radius: 59px;
}
  

JS:

 $(function(){

  $('.myButton').click(function(){
    $(this).toggleClass('on');
  });

})();