Jquery

stars · June 1, 2010

Ну в общем за последний месяц я таки с нулевого уровня знания js поднялся на начальный )))

И так я меня есть такая страничка (прородительницу этой страницы мне когдато написал псиволкер) http://stars124.narod.ru/js.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Z-index</title>
<style type="text/css">
	*{ margin: 0; padding:0}
	body { margin: 50px;}
	td.z { width: 300px; background: green;}
	td.m { width: 100px; background: red;}		
	table#wrap2  { width: 600px; height: 100px; border: 1px solid #000; }
	div.s { height: 96px; width: 200px; background: yellow; display: none; border: 2px dotted #F09; float:right; }
	div.b { height: 96px; width: 200px; background: yellow; display: block; border: 2px dotted #F09; float:right; }

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
		function color2(node){
		var wrap = document.getElementById('wrap2')

		var wrapDiv = wrap.getElementsByTagName('td')
		var wrapDiv2 = wrap.getElementsByTagName('div')
		var nodeDiv = node.getElementsByTagName('div').item(0)

		for(var i = 0; i<wrapDiv.length;i++){ 
			wrapDiv.item(i).className = 'm'
		}
				for(var i = 0; i<wrapDiv2.length;i++){ 
			wrapDiv2.item(i).className = 's'
			nodeDiv.className = 'b'
		}

		node.className = 'z'
	}

</script>
</head>

<body>

	<table id="wrap2">
		<tr>
			<td onclick="color2(this);" class="m">Проба1<div class="s">22222222</div></td>
			<td onclick="color2(this);" class="m">Проба2<div class="s">22222222</div></td>
			<td onclick="color2(this);" class="m">Проба3<div class="s">33333333</div></td>
			<td onclick="color2(this);" class="z">Проба4<div class="b">44444444</div></td>
		</tr>
	</table>
</body>
</html>

Все работает здорово но я хочу чтобы изменения объектов происходило плавно. Конечно же первым делом я стал смотреть как делают другие (разобрать награмождение функций у меня пока далеко не всегда получается поэтому я к вам и пришел за помощью ))))

я лично побывал тай способ

подключаю

<script type="text/javascript" src="jquery.js"></script>

и добавляю в скрипт перед node.className = 'z'

$(node). animate({"width": "+=200px"}, "slow");

Оно начинает двигаться плавно но как то все каряво (

Edited June 1, 2010 by stars

Sign In

Jquery

Question

stars

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information