Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.02.2016, 08:51
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Запрет повторной анимации
Здравствуйте уважаемы форумчане. Подскажите пожалуйста как запретить повторную анимацию при многократном наведении мыши. Прилагаю пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/normalize.css">
	<style>
		.wrapper{
			max-width: 1278px;
			margin: 40px auto;
			line-height: 140%;
		}
		.clearfix:before, .clearfix:after{
			content: " ";
			display: table;
		}
		.clearfix:after{
			clear: both;
		}
		.hover {
			float: left;
		}
		.show {
			float: left;
			width: 400px;
			background-color: #f6f6f6;
			padding: 10px;
			float: left;
			margin-left: 40px;
			display: none;
		}
	</style>
</head>
<body>
	<div class="wrapper clearfix">
		<div class="hover"><a class="hover__link" href="#">Lorem ipsum</a></div>
		<div class="show"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum excepturi voluptatem expedita ipsa totam tenetur corporis at. Officia voluptates impedit sed, dicta laborum aliquid aut dolorem natus. A, veritatis alias.</p></div>
	</div>
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>


$(function() {

	var flag = true;

	var timer;

	var show = function(elements, el) {

		$(elements).on('mouseenter', function() {
			clearTimeout(timer);
			$(el).fadeIn(300);
		})

		$(elements).on('mouseleave', function() {
			timer = setTimeout(function() { 
				$(el).fadeOut(300);
			},100)
		});
	}

	show(".hover, .show", ".show");
});
Ответить с цитированием
  #2 (permalink)  
Старый 21.02.2016, 08:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

s24344,
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/normalize.css">
	<style>
		.wrapper{
			max-width: 1278px;
			margin: 40px auto;
			line-height: 140%;
		}
		.clearfix:before, .clearfix:after{
			content: " ";
			display: table;
		}
		.clearfix:after{
			clear: both;
		}
		.hover {
			float: left;
		}
		.show {
			float: left;
			width: 400px;
			background-color: #f6f6f6;
			padding: 10px;
			float: left;
			margin-left: 40px;
			display: none;
		}
	</style>
</head>
<body>
	<div class="wrapper clearfix">
		<div class="hover"><a class="hover__link" href="#">Lorem ipsum</a></div>
		<div class="show"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum excepturi voluptatem expedita ipsa totam tenetur corporis at. Officia voluptates impedit sed, dicta laborum aliquid aut dolorem natus. A, veritatis alias.</p></div>
	</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>$(function() {



	var show = function(elements, el) {

		$(elements).on('mouseenter', function() {

			$(el).stop(true,true).fadeIn(300);
		})

		$(elements).on('mouseleave', function() {

				$(el).stop().delay(300).fadeOut(300);

		});
	}

	show(".hover, .show", ".show");
});
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 21.02.2016, 09:29
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Спасибо! А как сделать тоже самое, но на js (без библиотек)?
Ответить с цитированием
  #4 (permalink)  
Старый 21.02.2016, 09:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

s24344,
написать свои mouseenter и mouseleave fadeIn fadeOut
https://learn.javascript.ru/mousemov...ter-mouseleave
https://learn.javascript.ru/js-animation
этих двух ссылок достаточно, чтобы это осуществить ... хотя можно придумать вариант без js на одном css.
Ответить с цитированием
  #5 (permalink)  
Старый 21.02.2016, 09:58
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 21.02.2016, 10:42
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Последний вопрос: как реализовать .stop(true, true) ?
Ответить с цитированием
  #7 (permalink)  
Старый 21.02.2016, 11:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

fadeIn fadeOut на чистом js
s24344,
<!doctype html>
<html>
<head>

<style>

	.wrapper{
			max-width: 1278px;
			margin: 40px auto;
			line-height: 140%;
		}
		.clearfix:before, .clearfix:after{
			content: " ";
			display: table;
		}
		.clearfix:after{
			clear: both;
		}
		.hover {
			float: left;
		}
		.show {
			float: left;
			width: 400px;
			background-color: #f6f6f6;
			padding: 10px;
			float: left;
			margin-left: 40px;
			display: none;
		}


</style>

</head>

<body>

<div class="wrapper clearfix">
		<div class="hover"><a class="hover__link" href="#">Lorem ipsum</a></div>
		<div class="show"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum excepturi voluptatem expedita ipsa totam tenetur corporis at. Officia voluptates impedit sed, dicta laborum aliquid aut dolorem natus. A, veritatis alias.</p></div>
	</div>


<script>


window.requestAnimationFrame = window.requestAnimationFrame
                               || window.mozRequestAnimationFrame
                               || window.webkitRequestAnimationFrame
                               || window.msRequestAnimationFrame
                               || function(f){return setTimeout(f, 1000/60)}

window.cancelAnimationFrame = window.cancelAnimationFrame
                              || window.mozCancelAnimationFrame
                              || function(requestID){clearTimeout(requestID)} //fall back


var requestframeref;
var hover = document.querySelector('.hover');
var show = document.querySelector('.show');
var opacity = 0;
var timestart;
function fadeIn(){
		opacity += 2
		if (opacity > 100){
			opacity = 100;
		}

	else{
    requestframeref = requestAnimationFrame(fadeIn)
	}
	show.style.opacity = opacity/100;

}
function fadeOut(timestamp){
		if (timestamp - timestart > 300)opacity -= 3;
		if (opacity < 0){
			opacity = 0;
            show.style.display = 'none'
		}

	else{
    requestframeref = requestAnimationFrame(fadeOut)
	}
	show.style.opacity = opacity/100;

}

hover.addEventListener('mouseenter', function(){
    cancelAnimationFrame(requestframeref);
    show.style.display = 'block'
	requestAnimationFrame(fadeIn)
}, false)
show.addEventListener('mouseenter', function(){
    cancelAnimationFrame(requestframeref);
    show.style.display = 'block'
	requestAnimationFrame(fadeIn)
}, false)

hover.addEventListener('mouseleave', function(){
	cancelAnimationFrame(requestframeref);
    timestart = performance.now();
    requestAnimationFrame(fadeOut)
}, false)
show.addEventListener('mouseleave', function(){
	cancelAnimationFrame(requestframeref);
    timestart = performance.now();
    requestAnimationFrame(fadeOut)
}, false)

</script>

</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 21.02.2016, 15:19
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поимать окончание анимации и вывести картинку. karssen Элементы интерфейса 2 10.12.2015 16:20
Помогите убрать полосу прокрутки при анимации контента Lifemaster Элементы интерфейса 6 31.07.2015 02:59
Начало анимации с места предыдущей анимации FanAizu (X)HTML/CSS 3 21.03.2014 12:39
Нет прорисовки программной анимации (отрисовывается только конечный результат) AntiVIRUZ Общие вопросы Javascript 1 16.02.2014 18:56
Отмена действия события во время выполнения анимации gunsoy Общие вопросы Javascript 2 12.06.2012 13:27