Форум

JSN · #1 (**permalink**) 02.09.2012, 14:50

Вот html код

<html>
<body>
<script>
function showsl (n) 
{ var el=document.all["l"].style 
if (n==1) 
 el.opacity=0 
else 
 el.opacity=0.8 
}  
</script>
<form name="form1"> 
<input type="button" value=Показать onmouseover="showsl(2)" onmouseout='showsl(1)'> 
</form> 
<div id='l' style='opacity:0'>Некий текст</div>
</body>
</html>

Помогите пожалуйста, как сделать так, чтобы div проявлялся постепенно?
Заранее благодарен

Deff · #2 (**permalink**) 02.09.2012, 15:01

JSN,
Вот в сообщении 5 есть пример Помогите со скроллингом

можно сделать на jQuery http://hostjs-mybb2011.narod.ru/sliderLight.htm

Есть Вариант чисто через css http://qps.ru/mJXh4

bes · #3 (**permalink**) 02.09.2012, 15:52

<input id="but" type="button" value="Показать"> 
<div id='div' style="width: 100%; opacity: 0; filter: alpha(opacity=0)">Скрывается или исчезает</div>

<script>
window.onload = function () {
	var but = document.getElementById('but');
	var div = document.getElementById('div');
	var int;
	
	but.onmouseover = function () {
		clearInterval(int);
		var n = 0;
		int = setInterval(function () {
			if (n >= 1) {
				n = 1;
				clearInterval(int);
			}
			n = n + 0.1;
			div.style.opacity = n;
			div.style.filter = 'alpha(opacity=' + 100*n + ')';
		}, 100);
	}
	
	but.onmouseout = function () {
		clearInterval(int);
		var n = 1;
		int = setInterval(function () {
			if (n <= 0) {
				n = 0;
				clearInterval(int);
			}
			n = n - 0.1;
			div.style.opacity = n;
			div.style.filter = 'alpha(opacity=' + 100*n + ')';
		}, 100);
	}
	
}
</script>

не понял только почему в IE для div-a не срабатывает параметр filter, хотя для кнопки срабатывает

<input id="but" type="button" value="Показать" style="opacity: 0; filter: alpha(opacity=0)"> 
<div id='div'>Скрывается или исчезает</div>

<script>
window.onload = function () {
	var div= document.getElementById('but');
	var but= document.getElementById('div');
	var int;
	
	but.onmouseover = function () {
		clearInterval(int);
		var n = 0;
		int = setInterval(function () {
			if (n >= 1) {
				n = 1;
				clearInterval(int);
			}
			n = n + 0.1;
			div.style.opacity = n;
			div.style.filter = 'alpha(opacity=' + 100*n + ')';
		}, 100);
	}
	
	but.onmouseout = function () {
		clearInterval(int);
		var n = 1;
		int = setInterval(function () {
			if (n <= 0) {
				n = 0;
				clearInterval(int);
			}
			n = n - 0.1;
			div.style.opacity = n;
			div.style.filter = 'alpha(opacity=' + 100*n + ')';
		}, 100);
	}
	
}
</script>

JSN · #4 (**permalink**) 02.09.2012, 15:57

Спасибо огромное!

melky · #5 (**permalink**) 02.09.2012, 16:00

Сообщение от bes

не понял только почему в IE для div-a не срабатывает параметр filter, хотя для кнопки срабатывает

потому что фильтры не работают у элементов, у которых hasLayout установлено в false.

bes · #6 (**permalink**) 02.09.2012, 16:18

поправил, добавив width
какая коварная штука оказывается ещё есть, melky, спасибо

melky · #7 (**permalink**) 02.09.2012, 16:37

Сообщение от bes

поправил, добавив width

можно было просто поставить zoom:1

JSN · #8 (**permalink**) 02.09.2012, 19:50

<div id="but" style='position:absolute; top:60; left:90;'>Кнопка - картинка</div> 
<div id='div' style="opacity: 0; filter: alpha(opacity=0); 

position:absolute; top:100; left:100; z-index:100">Текст - Картинка</div>

<script>
window.onload = function () {
	var but = document.getElementById('but');
	var div = document.getElementById('div');
	var int;
	
	but.onmouseover = function () {
		clearInterval(int);
		var n = 0;
		int = setInterval(function () {
			if (n >= 0.8) {
				n = 0.8;
				clearInterval(int);
			}
			n = n + 0.001;
			div.style.opacity = n;
			div.style.filter = 'alpha(opacity=' + 80*n + ')';
		}, 0.01);
	}
	
	but.onmouseout = function () {
		clearInterval(int);
		var n = div.style.opacity;
		int = setInterval(function () {
			if (n <= 0) {
				n = div.style.opacity;
				clearInterval(int);
			}
			n = n - 0.001;
			div.style.opacity = n;
			div.style.filter = 'alpha(opacity=' + 80*n + ')';
		}, 0.01);
if (div.style.opacity > 0.3) {div.onmouseover = function () {clearInterval

(int);
		var n = 0.4;
		int = setInterval(function () {
			if (n >= 0.8) {
				n = 0.8;
				clearInterval(int);
			}
			n = n + 0.001;
			div.style.opacity = n;
			div.style.filter = 'alpha(opacity=' + 80*n + ')';
		}, 0.01);}
div.onmouseout = function () {clearInterval(int);
		var n = div.style.opacity;
		int = setInterval(function () {
			if (n <= 0) {
				n = div.style.opacity;
				clearInterval(int);
			}
			n = n - 0.001;
			div.style.opacity = n;
			div.style.filter = 'alpha(opacity=' + 80*n + ')';
		}, 0.01);}}
	}
		
}
</script>

я немного изменил код, в связи с нужными функциями, но есть проблема, после того, как div появился один раз, при наведении на него он снова появляется, даже если div.style.opacity<0.3
Я догадываюсь в чем ошибка, но не не знаю как исправить.
Заранее спасибо за помощь.

bes · #9 (**permalink**) 02.09.2012, 20:02

в чём смысл сей затеи, какой эффект должен получиться на выходе?

JSN · #10 (**permalink**) 25.10.2012, 20:54

Проблема решалась, с помощью display, я просто все усложнил.
Теперь возник другой вопрос:
Во-первых, допустим что у нас есть два массива array1 и array2, можно ли задать его элементам следующие значения: array1[1] = document.getElementBy..., например.
Во-вторых, если это возможно, то как сделать так, что бы при допустим наведении на элемент номер i массива array1, происходило нечто с элементом по номером i массива array2 (или i +1; или j; и т.д.)?
заранее спасибо

Форум

Справочник

Discord чат

Курсы javascript