Javascript.RU

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

функция fadeIn и fadeOut
Здравствуйте уважаемые форумчане. Подскажите пожалуйста, как в следующей функции запретить повторный её вызов при условии, что функция, к примеру, fadeIn уже сработала и у блока display: 'block'.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My Web Page</title>
	<style>
		div.contentbox {
			background: #1C9EFF;
			width: 300px;
			height: 100px;
			padding: 12px;
		}
	</style>
</head>
<body>
	<button onclick="fadeOut('div1')">Fade Out</button>
	<button onclick="fadeIn('div1')">Fade In</button>

	<div id="div1" class="contentbox"></div>
	<p>Content that lives under my box</p>

<script src="js/main.js"></script>
</body>
</html>


var fade = {
	fade_in_from: 0,
	fade_out_from: 10
}

var fadeOut = function(element) {
	var target = document.getElementById(element);
	var newSetting = fade.fade_out_from / 10;
	target.style.opacity = newSetting;
	fade.fade_out_from--;

	if (fade.fade_out_from == 0) {
		target.style.opacity = 0;
		target.style.display = "none";

		clearTimeout(loopTimer);

		fade.fade_out_from = 10;
		return false;
	}

	var loopTimer = setTimeout('fadeOut(\''+element+'\')', 50);
}

var fadeIn = function(element) {
	var target = document.getElementById(element);

	target.style.display = "block";
	var newSetting = fade.fade_in_from / 10;
	target.style.opacity = newSetting;
	fade.fade_in_from++;

	if (fade.fade_in_from == 10) {
		target.style.opacity = 1;

		clearTimeout(loopTimer);

		fade.fade_in_from = 0;
		return false;
	}

	var loopTimer = setTimeout('fadeIn(\''+element+'\')', 50);
}

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

s24344,
https://learn.javascript.ru/js-animation
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My Web Page</title>
	<style>
		div.contentbox {
			background: #1C9EFF;
			width: 300px;
			height: 100px;
			padding: 12px;
		}
	</style>
</head>
<body>
	<button onclick="fadeOut('div1')">Fade Out</button>
	<button onclick="fadeIn('div1')">Fade In</button>

	<div id="div1" class="contentbox"></div>
	<p>Content that lives under my box</p>

<script>
var fade = {
	fade_in_from: 0,
	fade_out_from: 10
}

var fadeOut = function(element) {
	var target = document.getElementById(element);
    if(getComputedStyle(target, "")["opacity"] == 0) return;
	var newSetting = fade.fade_out_from / 10;
	target.style.opacity = newSetting;
	fade.fade_out_from--;

	if (fade.fade_out_from == 0) {
		target.style.opacity = 0;
		target.style.display = "none";

		clearTimeout(loopTimer);

		fade.fade_out_from = 10;
		return false;
	}

	var loopTimer = setTimeout('fadeOut(\''+element+'\')', 50);
}

var fadeIn = function(element) {
	var target = document.getElementById(element);
    if(getComputedStyle(target, "")["opacity"]==1) return;
	target.style.display = "block";
	var newSetting = fade.fade_in_from / 10;
	target.style.opacity = newSetting;
	fade.fade_in_from++;

	if (fade.fade_in_from == 10) {
		target.style.opacity = 1;

		clearTimeout(loopTimer);

		fade.fade_in_from = 0;
		return false;
	}

	var loopTimer = setTimeout('fadeIn(\''+element+'\')', 50);
}
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 07.02.2016, 10:21
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает fadeOut fadeIn fadeTo Сершей jQuery 8 07.07.2013 21:50
fadeOut и fadeIn Tums37 jQuery 15 22.07.2012 10:58
fadein fadeout DIV Gennadiy jQuery 0 25.05.2012 10:57
как правильно рассположить fadeOut и fadeIn realgleb Общие вопросы Javascript 0 22.03.2012 15:07
JQUERY fadeIn и fadeOut ПРОБЛЕМА RomanVasin Элементы интерфейса 6 30.05.2010 11:19