как сделать изменение размера плавным?

iluha · March 11, 2010

Всем привет.

Есть скрипт, изменяющий ширину объекта. Хочу сделать так, чтобы размер изменялся плавно по 6сть пикселей.

(объект DIV с id ="bread", а wW - это окончательный размер объекта bread)

function EnlargeBread() {

for (i=1; i < wW; i=i+6) {

document.getElementById("bread").style.width = i;

}

Не могу никак разобраться с таймАутом - как его использовать в качестве задержки, чтобы всё это было плавно?

Пробовал писать так:

function EnlargeBread() {

for (i=1; i < wW; i=i+6) {

bread.int = setTimeout(function() { document.getElementById('bread').style.width = i; }, 1000);

}

Но никакой плавности всё равно нет. Происходит пауза и через некоторое время происходит резкое изменение размера уже до wW.

Пожалуйста подскажите.

Edited March 12, 2010 by iluha

Great Rash · March 12, 2010

Во-первых, вам нужен не setTimeout, а setInterval. Так как setTimeout - это вызов функции один раз по истечении некоторого времени, а setInterval - это вызов функции бесконечное количество раз через определенный интервал времени, до тех пор пока не будет вызван метод clearInterval

Во-вторых, вам надо отказаться от цикла, т.к. setInterval фактически это и делает.

iluha · March 12, 2010

уважаемый Грейт Раш!

А не могли бы написать мне разок код с setIntervalб чтоб я знал.

Great Rash · March 12, 2010


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		div {
			width: 90px;
			height: 90px;
			padding: 5px;
			background: #efddfe;
		}
	</style>

	<script type="text/javascript">
		var animate = {
			start: function(elem) {
				elem = typeof elem == 'string' ? document.getElementById(elem) : elem;
				var startW = elem.offsetWidth;
				var elemW = startW;
				var elemH = elem.offsetHeight;
				var prnt = this;

				if (prnt.changeInt) {
					window.clearInterval(prnt.changeInt);
				}

				this.changeInt = window.setInterval(
					function() {
						elemW++;
						elemH++;
						elem.style.width = elemW + 'px';
						elem.style.height = elemH + 'px';
						elem.innerHTML = 'width: ' + elemW + '<br />' + 'height: ' + elemH ;

						if (elemW >= (startW + 50)) {
							window.clearInterval(prnt.changeInt);
							elem.innerHTML += '<br />кликни по мне снова';
						}
					}
				, 10);
			}
		}
	</script>
</head>

<body>

	<div onclick="animate.start(this);">кликни по мне</div>

</body>
</html>

iluha · March 12, 2010

Спасибо! Сделал так:

function EnlargeBread() {
var i = 0;

this.int = setInterval(function() 
{ 
	i = i + 40; 
	document.getElementById('bread').style.width = i; 
	if (i >= (wW-40)) {
				   this.int = clearInterval(this.int);
				   document.getElementById('bread').style.width =wW; 
				   }
	}, 1);
}

Edited March 12, 2010 by iluha

Sign In

как сделать изменение размера плавным?

Question

iluha

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

iluha

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

iluha

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information