Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.11.2015, 18:46
Аватар для Raketa
Интересующийся
Отправить личное сообщение для Raketa Посмотреть профиль Найти все сообщения от Raketa
 
Регистрация: 23.11.2015
Сообщений: 11

@keyframes через jquery
Подскажите пожалуйста вот сделал анимацию на css3 (@-keyframes) а можно её подключить через jquery как-то? Я учусь только! )
Ответить с цитированием
  #2 (permalink)  
Старый 23.11.2015, 19:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Raketa,
удалить добавить класс элементу ?
http://api.jquery.com/toggleClass/

Последний раз редактировалось рони, 23.11.2015 в 19:06.
Ответить с цитированием
  #3 (permalink)  
Старый 23.11.2015, 19:13
Аватар для Raketa
Интересующийся
Отправить личное сообщение для Raketa Посмотреть профиль Найти все сообщения от Raketa
 
Регистрация: 23.11.2015
Сообщений: 11

Ну вот при клике к примеру! Чтоб я кликнул и моя анимация заработала!
Спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 23.11.2015, 19:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Raketa,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div {
     width:100px;
    height:100px;
    border: 2px solid rgba(0, 0, 205, 1);
    border-radius: 8px;
  }

  div.active{
    -webkit-animation: color 5s ease-in-out infinite;
	-moz-animation: color 5s ease-in-out infinite;
	-o-animation: color 5s ease-in-out infinite;
	animation: color 5s ease-in-out infinite;
  }

  @keyframes color {
      0% {
        background-color: #FF0000;
      }
      17%{
         background-color: #FFA500;
      }
      34%{
         background-color:  #FFFF00;
      }
     51%{
         background-color:  #008000;
      }
	68% {
		  background-color:  #0000FF;
	}
   85%{
         background-color:  #000080;
   }
   100%{
     background-color: #800080;
   }

}
@-webkit-keyframes color {
  0% {
        background-color: #FF0000;
      }
      17%{
         background-color: #FFA500;
      }
      34%{
         background-color:  #FFFF00;
      }
     51%{
         background-color:  #008000;
      }
	68% {
		  background-color:  #0000FF;
	}
   85%{
         background-color:  #000080;
   }
   100%{
     background-color: #800080;
   }
}
   </style>
   <script src="https://code.jquery.com/jquery-1.11.3.min.js">
</script>
  <script>
$(function () {
       var div = $('div');
       div.click(function(){
             div.toggleClass('active')
             });
  });
  </script>
</head>

<body>
<div>click me</div>

</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 23.11.2015, 19:51
Аватар для Raketa
Интересующийся
Отправить личное сообщение для Raketa Посмотреть профиль Найти все сообщения от Raketa
 
Регистрация: 23.11.2015
Сообщений: 11

Ой! Ну спасибо Вам большое! Всё понятно стало! Благодарю!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Когда меняю через JQuery html, то измененный CSS сбрасывается. iskman Javascript под браузер 1 20.03.2014 08:40
Как добраться через jquery к элементу? literator Events/DOM/Window 3 25.12.2013 21:45
jquery не видит value input-a, загруженного через ajax Mukhtar AJAX и COMET 1 25.12.2013 02:41
кеширование HTML переданого через ajax BorisBritva jQuery 6 02.04.2011 01:23
Jquery. загрузка части документа через ajax-запрос InviS jQuery 8 01.03.2010 17:47