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

@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

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@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