Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.01.2016, 09:00
Новичок на форуме
Отправить личное сообщение для Shadow_ua Посмотреть профиль Найти все сообщения от Shadow_ua
 
Регистрация: 21.01.2016
Сообщений: 4

Замена класса по клику и возврат через время!
Здравствуйте! Нужна помощь Есть кнопка, при нажатии на нее происходит анимация, нужно по нажатию имеющийся класс заменить на другой и по истечению(2 сек, например)времени вернуть прежний класс. Есть код-переключатель, а как из него сделать таймер я не знаю

$('#button').on('click', function(){
    if ($(this).hasClass('list-button')) {
        $(this).removeClass('list-button').addClass('loader-button');
        return
    }
    $(this).removeClass('loader-button').addClass('list-button');
});

Последний раз редактировалось Shadow_ua, 21.01.2016 в 09:22.
Ответить с цитированием
  #2 (permalink)  
Старый 21.01.2016, 09:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,127

Shadow_ua,
макет бы целиком с кнопкой и css
Ответить с цитированием
  #3 (permalink)  
Старый 21.01.2016, 10:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,127

animationend and toggleClass
Shadow_ua,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .list-button  {
     border: 5px solid Blue;

  }
  .loader-button {
    -webkit-animation: color .5s ease-in-out 4;
	-moz-animation: color .5s ease-in-out 4;
	-o-animation: color .5s ease-in-out 4;
	animation: color .5s ease-in-out 4;
  }

  #button{
   border-radius: 8px;
   background: #696969;
   font-size: 48px;
   color: #FFFFFF;
   width:100px;
   height:100px;
}
 #button:focus{
    outline:  none;
}
    @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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
 $('#button').on({'click': function(){
    $(this).toggleClass('loader-button list-button');
},'webkitAnimationEnd animationend' : function() {
    $(this).trigger('click')
}});
});


  </script>
</head>

<body>

<input id="button" name="" type="button" value="go" class="list-button">

</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 21.01.2016, 11:10
Новичок на форуме
Отправить личное сообщение для Shadow_ua Посмотреть профиль Найти все сообщения от Shadow_ua
 
Регистрация: 21.01.2016
Сообщений: 4

Кнопка ромбом

Последний раз редактировалось Shadow_ua, 21.01.2016 в 13:06.
Ответить с цитированием
  #5 (permalink)  
Старый 21.01.2016, 12:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,127

keyframes and animationend
Shadow_ua,
макет надо делать самому ...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.list-button {
	position: relative;
  	margin-top: 180px;
	left: 50%;
	width: 80px;
	height: 80px;
	-webkit-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
	-moz-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
	-o-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
	transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	animation: none;
}
.list-button span {
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	background-color: #00A690;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	animation: none;
}
.list-button span:nth-child(1) {
	top: 0;
	left: 0;
}
.list-button span:nth-child(2) {
	top: 0;
	right: 0;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	animation: none;
}
.list-button span:nth-child(3) {
	bottom: 0;
	left: 0;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	animation: none;
}
.list-button span:nth-child(4) {
	bottom: 0;
	right: 0;
}


@keyframes loader {
0%, 10%, 100% {
    width: 80px;
    height: 80px;
	}
65% {
    width: 150px;
    height: 150px;
	}
}
@-webkit-keyframes loader {
0%, 10%, 100% {
    width: 80px;
    height: 80px;
	}
65% {
    width: 150px;
    height: 150px;
	}
}
@keyframes loaderBlock {
0%, 30% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
	}
55% {
    background-color: #00e0c2;
	}
100% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
	}
}
@-webkit-keyframes loaderBlock {
0%, 30% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
	}
55% {
    background-color: #00e0c2;
	}
100% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
	}
}
@keyframes loaderBlockInverse {
0%, 20% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
	}
55% {
    background-color: #00e0c2;
	}
100% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
	}
}
@-webkit-keyframes loaderBlockInverse {
0%, 20% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
	}
55% {
    background-color: #00e0c2;
	}
100% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
	}
}
.loader-button {
	position: relative;
 	margin-top: 180px;
	left: 50%;
	width: 80px;
	height: 80px;
	-webkit-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
	-moz-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
	-o-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
	transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
	-webkit-animation: loader 1.2s 1 ease-in-out;
	-moz-animation: loader 1.2s 1 ease-in-out;
	-o-animation: loader 1.2s 1 ease-in-out;
	animation: loader 1.2s 1 ease-in-out;
	}
.loader-button span {
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	background-color: #00A690;
	-webkit-animation: loaderBlock 1.2s 1 ease-in-out both;
	-moz-animation: loaderBlock 1.2s 1 ease-in-out both;
	-o-animation: loaderBlock 1.2s 1 ease-in-out both;
	animation: loaderBlock 1.2s 1 ease-in-out both;
	}
.loader-button span:nth-child(1) {
	top: 0;
	left: 0;
	}
.loader-button span:nth-child(2) {
	top: 0;
	right: 0;
	-webkit-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
	-moz-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
	-o-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
	animation: loaderBlockInverse 1.2s 1 ease-in-out both;
	}
.loader-button span:nth-child(3) {
	bottom: 0;
	left: 0;
	-webkit-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
	-moz-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
	-o-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
	animation: loaderBlockInverse 1.2s 1 ease-in-out both;
	}
.loader-button span:nth-child(4) {
	bottom: 0;
	right: 0;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
 $('#button').on('click', function(event){
    event.preventDefault();
    $(this).toggleClass('loader-button list-button');
});

$('#button span:last').on('webkitAnimationEnd animationend', function() {
    $('#button').trigger('click')
});
});


  </script>
</head>

<body>

<div class="loader-button" id="button">
						<a href="#portfolio">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
						</a>
						</div>

</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 21.01.2016, 12:15
Новичок на форуме
Отправить личное сообщение для Shadow_ua Посмотреть профиль Найти все сообщения от Shadow_ua
 
Регистрация: 21.01.2016
Сообщений: 4

В смысле самому? Это мой сайт
Ответить с цитированием
  #7 (permalink)  
Старый 21.01.2016, 12:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,127

Shadow_ua,
вас просили локализовать проблему, это понятно?
Ответить с цитированием
  #8 (permalink)  
Старый 21.01.2016, 12:25
Новичок на форуме
Отправить личное сообщение для Shadow_ua Посмотреть профиль Найти все сообщения от Shadow_ua
 
Регистрация: 21.01.2016
Сообщений: 4

Спасибо за помощь!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена класса serdef Элементы интерфейса 2 01.01.2014 20:44
изменение класса по клику Hurray Элементы интерфейса 2 03.11.2013 17:43
Возврат результата функции через её параметр x-yuri Оффтопик 11 16.04.2010 11:52
Повторное действие скрипта через определенное время fortitudo jQuery 8 27.01.2010 06:00
смена цвета через определенное время niculins Общие вопросы Javascript 2 14.11.2008 17:01