Форум

Shadow_ua · #1 (**permalink**) 21.01.2016, 09:00

Здравствуйте! Нужна помощь

Есть кнопка, при нажатии на нее происходит анимация, нужно по нажатию имеющийся класс заменить на другой и по истечению(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');
});

рони · #2 (**permalink**) 21.01.2016, 09:48

Shadow_ua,
макет бы целиком с кнопкой и css

рони · #3 (**permalink**) 21.01.2016, 10:32

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>

Shadow_ua · #4 (**permalink**) 21.01.2016, 11:10

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

рони · #5 (**permalink**) 21.01.2016, 12:04

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>

Shadow_ua · #6 (**permalink**) 21.01.2016, 12:15

В смысле самому? Это мой сайт

рони · #7 (**permalink**) 21.01.2016, 12:22

Shadow_ua,
вас просили локализовать проблему, это понятно?

Shadow_ua · #8 (**permalink**) 21.01.2016, 12:25

Спасибо за помощь!

Форум

Справочник

Discord чат

Курсы javascript