Форум

murad30 · #1 (**permalink**) 25.09.2011, 18:53

Всем привет... У меня такая проблемка,js я начал изучать недавно, вот пытался сделать простенькое меню. Задание вот какое
1) Требуется создать список <ul>ссылок<a> сослед.функциональностью:
1. При клике на ссылку все остальные сдвигаются в сторону.
2. При клике на другую ссылку сначала все возвращаются на исходную позицию, а затемсдвигаются относительно текущей, как в п. 1.
3. После клика на ссылке в ее текст добавляется в конец счетчик кликов (например,«Ссылка [2]»), а при каждом клике значение счетчика увеличивается. До первогоклика ссылка счетчика не имеет («Ссылка»).
4. После достижения порогового значения счетчика кликов (5) ссылка исчезает из списка.

<script type="text/javascript">
$(function() {

$('li').click(function() {

var current = $(this);
var id = current.attr('id');
var str = "#list"+ id;
var number = parseInt($(str).text());
number = number +1;
if (number <5)
{
$(str).html(number);
$('li').each(function(){
$(this).css('margin-left','0');
});

$('li').each(function() {
$(this).animate({margin:'0 0 0 30px'},
{duration:200});

});
current.animate({margin:'0'},
{duration:100});
}
else {
$(this).remove();
}
})

});
</script>
вот вроде получилось только вот проблема в том что
-меню движется рывками нужно сделать чтобы передвигалось плавно.
-и в начале при загрузке после ссылки показывается [0] нужно сделать чтобы только после нажатия на ссылку отображалось [1]

ksa · #2 (**permalink**) 26.09.2011, 08:45

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

-меню движется рывками нужно сделать чтобы передвигалось плавно.

Читай статейку...
http://javascript.ru/blog/Andrej-Par...mmnoy-animacii

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

-и в начале при загрузке после ссылки показывается [0] нужно сделать чтобы только после нажатия на ссылку отображалось [1]

Просто добавь еще одно условие...

murad30 · #3 (**permalink**) 26.09.2011, 12:23

Чего то я не догоняю как это сделать. ерунда какая то получается насчет плавного передвижения.

setTimeout(function() {
/* Тут изменение параметров */
if (/* условие срабатывания итерации */)
setTimeout(arguments.callee, 0);
}, 0);

ksa · #4 (**permalink**) 26.09.2011, 13:29

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

Чего то я не догоняю как это сделать.

Как вариант...

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
	width: 50px;
	height: 50px;
	cursor: pointer;
	border: 1px solid;
}
</style>
<script type="text/javascript">
function Go(Obj) {
	var inc=10
	var i=(Obj.style.width)? Obj.style.width: 50
	i=parseInt(i)
	if (i>=100) return
	Obj.style.width=i+inc+'px'
	setTimeout(function(){Go(Obj)},1)
}
</script>
</head>
<body>
<div onclick='Go(this)'>
</div>
</body>
</html>

Но ты используешь ЖиКвери... Т.ч. Х/з чего он у тебя "движется рывками"...

murad30 · #5 (**permalink**) 26.09.2011, 16:04

С анимацией разобрался, но вот со вторым пунктом все еще нет, не могу сделать
-и в начале при загрузке после ссылки отображается [0], нужно сделать так чтобы индекс отображался только после нажатия на ссылку. [1]

вроде прописываю
-------------------
$(window).load(function{
$('#list + span').hide(1000)});
----------------------------------------------------------------

<script type="text/javascript">

$(window).load(function{
$('#list + span').hide(1000)});

$(function() {
$('li').click(function() {

var current = $(this);
var id = current.attr('id');
var str = "#list"+ id;
var number = parseInt($(str).text());
number = number +1;
if (number <5)
{
$(str).html(number);
$('li').each(function(){
$(this).css('margin-left','0');
});
$('li').each(function() {
$(this).animate({
width: "70%",
marginLeft: "0.4in",
fontSize: "1em",
}, 900 );
});
current.animate({margin:'0'},
{duration:1000});
}
else {
$(this).remove();
}
})
});
</script>
меню просто отказывает реагировать.
Заранее спасибо

Форум

Справочник

Discord чат

Курсы javascript