Анимация rotate jquery

372
31 августа 2017, 19:50

Задача, чтобы при наведении бордеры крутились на 90deg. Нужно чтоб при наведении срабатывала анимация полностью, пока не закончится. Уже долго ищу ответ. Кто знает как такое делается на jquery? Эффект с opacity получается, а вот rotate нет.

$(document).ready(function(){
        $('.box')
            .hover(function() {
                $('.border-first').stop().animate({ 
                    opacity: 0.2 
                }, 'slow');
            }, function() {
                $('.border-first').stop().animate({ 
                    opacity: 1 
                }, 'slow');
        });

    });

.wrap { 
		width: 100%; 
		height: 100%; 
		padding: 100px; 
		background: #f5f5f5; 
		position: relative; 
		display: block; 
		margin: 0 auto; 
	} 
 
	.box { 
		margin: 0 15px; 
		display: inline-block; 
		position: relative; 
		text-align: center; 
		min-width: 300px; 
	} 
	.icon { 
		width: 50px; 
		margin: 0 auto; 
		padding: 50px; 
	} 
	.icon img { 
		width: 100%; 
	} 
	.border-first { 
		width: 100px; 
		height: 100px; 
		position: absolute; 
		transform: rotate(0deg); 
		top: 25px; 
		left: 50%; 
		margin-left: -50px; 
		border: 3px solid #333333; 
	} 
	.border-second { 
		width: 100px; 
		height: 100px; 
		position: absolute; 
		transform: rotate(45deg); 
		top: 25px; 
		left: 50%; 
		margin-left: -50px; 
		border: 3px solid tomato; 
	} 
 
	.text { 
		font-family: Roboto, sans-serif; 
		font-size: 20px; 
		color: #333; 
		padding: 30px 0; 
	}
   <div class="wrap"> 
	<div class="box"> 
		<div class="icon"> 
			<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="icon"> 
		</div> 
		<div class="border-first"></div> 
		<div class="border-second"></div> 
		<div class="text"> 
			Hello, A im super block with animation!!! 
		</div> 
	</div> 
	<div class="box"> 
		<div class="icon"> 
			<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="icon">			 
		</div> 
		<div class="border-first"></div> 
		<div class="border-second"></div> 
		<div class="text"> 
			Hello, A im super block with animation!!! 
		</div> 
	</div> 
	<div class="box"> 
		<div class="icon"> 
			<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="icon"> 
		</div> 
		<div class="border-first"></div> 
		<div class="border-second"></div> 
		<div class="text"> 
			Hello, A im super block with animation!!! 
		</div> 
	</div> 
</div>

READ ALSO
Трехуровневое меню \ Псевдоклассы CSS

Трехуровневое меню \ Псевдоклассы CSS

Добрый день уважаемыеПодскажите, пожалуйста как реализовать на CSS отображение трехуровневого меню Вот на этом примере

443
Изменить фон при скролле вниз на 100vh

Изменить фон при скролле вниз на 100vh

Есть фиксированный хедер, в нём есть кнопка (#button), фон кнопки изначально прозраченНо при прокрутке страницы вниз на 100vh фон кнопки должен...

407
Как сделать выбор рейтинга для товаров?

Как сделать выбор рейтинга для товаров?

Как сделать выбор рейтинга в виде звёзд? И нужно поставить звёзды в формате svg, svg имеютсяА допустим если использовать плагин jquery bar rating, то там...

378
Комбинации вложенности классов Bootstrap

Комбинации вложенности классов Bootstrap

У меня вопрос касаемо того, какие классы Bootstrap, предназначенные для создания адаптивного макета, могут быть вложены друг в другаРазумеется,...

379