Подскажите как отредактировать меню?

@Animado · Регистрация: 19.07.2012

Студворк — интернет-сервис помощи студентам

общем я в js полный ноль, но для работы срочно нужно сделать следующее:

Есть скрипт на главной странице который позволяет поэтапно вывести картинки на страницу. вот он:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
п»ї$(document).ready(function(){       
        $("#top_left").delay(500).animate({opacity: '1.0'},1000);
        $("#top_right").delay(1500).animate({opacity: '1.0'},1000);
        $(".main_menu").delay(2500).animate({opacity: '1.0'},1000,"linear",function(){
       
                var counter = 0;
                a=true;
               
                var I = setInterval(function() {
                        var x=60; // РјРЅРѕР¶РёС‚РµР»СЊ
                       
                        if(counter == 0*x && a==true) $("#slide4 .img41").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},10*x);
                       
                        if(counter == 6*x && a==true) $("#slide1 .img12").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},10*x);
                        if(counter == 6*x && a==true) $("#slide1 .img14").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},10*x);
                        //if(counter == 6*x && a==true) $("#slide1 .img11").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},10*x);
                        //if(counter == 7*x && a==true) $("#slide1 .img12").animate({opacity: '1.0'},20*x).delay(40*x).animate({opacity: '0'},10*x);
                        //if(counter == 8*x && a==true) $("#slide1 .img13").animate({opacity: '1.0'},20*x).delay(25*x).animate({opacity: '0'},10*x);
                        //if(counter == 9*x && a==true) $("#slide1 .img14").animate({opacity: '1.0'},20*x).delay(15*x).animate({opacity: '0'},10*x);
                       
                        if(counter == 13*x && a==true) $("#slide2 .img21").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},10*x);
                        if(counter == 14*x && a==true) $("#slide2 .img22").animate({opacity: '1.0'},20*x).delay(40*x).animate({opacity: '0'},10*x);
                       
                        if(counter == 20*x && a==true) $("#slide3 .img31").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},20*x);
                        if(counter == 21*x && a==true) $("#slide3 .img32").animate({opacity: '0.6'},30*x).animate({opacity: '0.4'},10*x).delay(20*x).animate({opacity: '0'},20*x);
                               
                       
                        if (counter++ > 28*x) counter=0;
                }, 10);
        });
  window.onfocus = function(){var a=true;}
  window.onblur = function(){var a=false;}  
});

В работает прекрасно, но в диве .main_menu находится список меню... мне нужно чтобы этот список выводился на сразу (а сейчас он появляется весь сразу), а поочередно ссылками друг за другом, без всяких изменений положений, просто 1-я, 2-я и тд

Подскажите как это сделать?

@EPMAK · 08.08.2012, 14:31

делается легко, с помощью setInterval()
____________________________________
не по теме: совет на будущее - ставьте кодировку файлов utf-8 ( без BOM ), чтобы вот этого -> (( п»ї )) не было такого на страницах.

@Animado · 08.08.2012, 14:55 **[ТС]**

Помогите пожалуйста с кодом, куда это нужно вставить?

@Schtrich · 08.08.2012, 18:24

JavaScript язык программирования, а не копипаст, хотите что-то сделать -> объясняйте толково что вам нужно. Вот мой вам пример: http://jsfiddle.net/Stasonix/knxuu/2/ (интересно получилось). Но это пример! Вам возможно понадобиться сделать что-то подобное. И никакой копипаст вам не поможет если вы в этом цитирую:

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

общем я в js полный ноль

@Animado · 09.08.2012, 09:36 **[ТС]**

Хорошо, постараюсь объяснить максимально подробно.

У меня есть меню, выглядит так:
http://imglink.ru/show-image.p... 0301 8bb3d

Код для меню:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
echo '<ul class="menu">
    <li><a '.($di==2?style="color: #900":'').' href="[~2~]">о компании</a></li>
    <li><a href="[~3~]">магазины</a></li>
    <li><a href="[~4~]">акции</a></li>
    <li><a href="[~5~]">услуги</a></li>
    <li><a href="[~6~]">система скидок</a></li>
    <li><a href="[~7~]">подарочные сертификаты</a></li><br/>
    <li><a href="[~8~]">полезная информация</a></li>
    <li><a href="[~9~]">вакансии</a></li>
    <li><a href="[~10~]">контакты</a></li>
    <li><a href="[~11~]">обратная связь</a></li>
    </ul>';

Css меню:

HTML5
1
.main_menu{opacity: 0}

Ну и сам скрипт появления всего на странице:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(document).ready(function(){   
    $("#top_left").delay(500).animate({opacity: '1.0'},1000);
    $("#top_right").delay(1500).animate({opacity: '1.0'},1000);
    $(".main_menu").delay(2500).animate({opacity: '1.0'},1000,"linear",function(){
    
        var counter = 0;
        a=true;
        
        var I = setInterval(function() {
            var x=60; // РјРЅРѕР¶РёС‚РµР»СЊ 
            
            if(counter == 0*x && a==true) $("#slide4 .img41").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},10*x);
            
            if(counter == 6*x && a==true) $("#slide1 .img12").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},10*x);
            if(counter == 6*x && a==true) $("#slide1 .img14").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},10*x);
            //if(counter == 6*x && a==true) $("#slide1 .img11").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},10*x);
            //if(counter == 7*x && a==true) $("#slide1 .img12").animate({opacity: '1.0'},20*x).delay(40*x).animate({opacity: '0'},10*x);
            //if(counter == 8*x && a==true) $("#slide1 .img13").animate({opacity: '1.0'},20*x).delay(25*x).animate({opacity: '0'},10*x);
            //if(counter == 9*x && a==true) $("#slide1 .img14").animate({opacity: '1.0'},20*x).delay(15*x).animate({opacity: '0'},10*x);
            
            if(counter == 13*x && a==true) $("#slide2 .img21").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},10*x);
            if(counter == 14*x && a==true) $("#slide2 .img22").animate({opacity: '1.0'},20*x).delay(40*x).animate({opacity: '0'},10*x);
            
            if(counter == 20*x && a==true) $("#slide3 .img31").animate({opacity: '1.0'},20*x).delay(50*x).animate({opacity: '0'},20*x);
            if(counter == 21*x && a==true) $("#slide3 .img32").animate({opacity: '0.6'},30*x).animate({opacity: '0.4'},10*x).delay(20*x).animate({opacity: '0'},20*x);
                
            
            if (counter++ > 28*x) counter=0;
        }, 10);
    });
  window.onfocus = function(){var a=true;}
  window.onblur = function(){var a=false;}  
});

Сейчас все мое меню появляется одним блоком. Мне нужно чтобы появлялось по очереди каждая ссылка. Вроде максимально подробно объяснил...

@Schtrich · 09.08.2012, 09:59

смотрите что видят отвечающие на форуме вам люди: http://jsfiddle.net/Stasonix/RQ7h4/

Что тут появляется???

Добавлено через 14 минут
Возможно так будет нагляднее: http://jsfiddle.net/Stasonix/RQ7h4/2/

вот ваше меню:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<ul class="menu">
    <li><a href="#">о компании</a></li>
    <li><a href="#">магазины</a></li>
    <li><a href="#">акции</a></li>
    <li><a href="#">услуги</a></li>
    <li><a href="#">система скидок</a></li>
    <li><a href="#">подарочные сертификаты</a></li>
    <li><a href="#">полезная информация</a></li>
    <li><a href="#">вакансии</a></li>
    <li><a href="#">контакты</a></li>
    <li><a href="#">обратная связь</a></li>
</ul>​

вот эффект:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var i=0; sec = 2000;
 
var startInterval = setInterval(function(){
    
    $('li:eq('+i+')').fadeIn(sec);
    
    i++;
    
    if (i>=$('ul.menu').children().length) { 
        
        clearInterval(startInterval); 
    }
 
},sec);

Внимание! В стиле скрываете ни весь блок ul, а только его потомков li:

CSS
1
.menu li { display: none; }​

Пробуйте. В консоле смотрите ошибки если что.

p.s. небольшой глюк на форуме с сущностями.

@Animado · 09.08.2012, 14:40 **[ТС]**

А вот этот код для js в какое место моего исходного кода вставить?

@EPMAK · 09.08.2012, 14:59

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

А вот этот код для js в какое место моего исходного кода вставить?

ставьте сразу перед </head>

альтернативный вариант:

сразу перед </body>

@Animado · 09.08.2012, 15:03 **[ТС]**

нет у меня файл со скриптом js отдельно, нужно чтобы в нем было

Добавлено через 1 минуту
я его содержимое полностью выложил

@Schtrich · 09.08.2012, 15:50

воткните после

JavaScript
1
$(document).ready(function(){

т.е.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
var i=0; 
sec = 2000; // скорость анимации
 
var startInterval = setInterval(function(){
    
    $('li:eq('+i+')').fadeIn(sec);
    
    i++;
    
    if (i>=$('ul.menu').children().length) { 
        
        clearInterval(startInterval); 
    }
 
},sec);
 
// ... а тут остальной ваш код

@Animado · 09.08.2012, 15:54 **[ТС]**

и соответственно это уже удалить?

PHP
1
 $(".main_menu").delay(2500).animate({opacity: '1.0'},1000,"linear",function(){

@Schtrich · 09.08.2012, 16:05

Если оно мешает, то да.

@Animado · 09.08.2012, 16:06 **[ТС]**

Просто сейчас уже все не отображается)

@Schtrich · 09.08.2012, 16:36

Я в экстрасенсы не записывался и копи-паст не панацея от нехватки программирования в организме.

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

@EPMAK tribal dance 168 / 156 / 36 Регистрация: 03.09.2009 Сообщений: 820 Записей в блоге: 17
	08.08.2012, 14:31
	делается легко, с помощью setInterval() ____________________________________ не по теме: совет на будущее - ставьте кодировку файлов utf-8 ( без BOM ), чтобы вот этого -> (( п»ї )) не было такого на страницах. 0

@Animado 0 / 0 / 0 Регистрация: 19.07.2012 Сообщений: 67
	08.08.2012, 14:55 [ТС]
	Помогите пожалуйста с кодом, куда это нужно вставить? 0

@Animado 0 / 0 / 0 Регистрация: 19.07.2012 Сообщений: 67
	09.08.2012, 14:40 [ТС]
	А вот этот код для js в какое место моего исходного кода вставить? 0

@Animado 0 / 0 / 0 Регистрация: 19.07.2012 Сообщений: 67
	09.08.2012, 15:03 [ТС]
	нет у меня файл со скриптом js отдельно, нужно чтобы в нем было Добавлено через 1 минуту я его содержимое полностью выложил 0

@Schtrich weboman 210 / 195 / 63 Регистрация: 13.08.2010 Сообщений: 1,531 Записей в блоге: 6
	09.08.2012, 16:05
	Если оно мешает, то да. 0

@Animado 0 / 0 / 0 Регистрация: 19.07.2012 Сообщений: 67
	09.08.2012, 16:06 [ТС]
	Просто сейчас уже все не отображается) 0

@Schtrich weboman 210 / 195 / 63 Регистрация: 13.08.2010 Сообщений: 1,531 Записей в блоге: 6
	09.08.2012, 16:36
	Я в экстрасенсы не записывался и копи-паст не панацея от нехватки программирования в организме. 0