исчезать в навигации после загрузки страницы

Question

Я пытаюсь создать навигационное меню, в котором каждая «кнопка» последовательно появляется после загрузки страницы.Я провел много поисков в гугле и еще не нашел ничего похожего на то, что я ищу.Большинство из них были связаны только с анимацией самих кнопок (т.е. изменение цвета шрифта или фона при наведении курсора).Я собираюсь сделать так, чтобы после загрузки страницы в верхнем крае страницы появлялись «кнопки» подменю.Я чувствую, что это можно сделать просто с помощью CSS (и, возможно, javascript, хотя я не очень хорош в этом, поэтому, пожалуйста, будьте предельно ясны с любыми идеями :-)), без необходимости добавлять jqueryЯ не использую какое-либо модное программное обеспечение, просто базовое HTML-кодирование.

Answer 1

Рассматривали ли вы jQuery ? В jQuery есть функция fadeIn, которая может вас заинтересовать, а также множество других интересных вещей.

Вот пример того, что вы хотите использовать с помощью jQuery. http://jsfiddle.net/ngzmy/1/

Как уже говорили другие, другим вариантом будет переход CSS, который поддерживается не во всех браузерах.

Answer 2

Вы можете сделать это только с помощью CSS-анимации, но это не сработает во всех браузерах.Настройте анимацию, затем назначьте каждой кнопке более длительное время задержки.Это может быть не совсем тот вид, который вам нужен.

Если вы пойдете по маршруту js, вы сможете заставить его работать лучше в разных браузерах.Я бы посоветовал вам пойти дальше и использовать jquery - он не очень большой и облегчает выполнение подобных задач.Я хотел бы подойти к вашей проблеме следующим образом:

1. Установить начальное состояние непрозрачности = 0 для всех кнопок.(Редактировать: или нет. См. Комментарий ниже.)
2. Вызвать вашу функцию постепенного появления для каждой кнопки по порядку, с соответствующей задержкой в ​​несколько миллисекунд между ними, если необходимо.Ваша функция появления должна быть просто циклом, который устанавливает непрозрачность для элемента, который был передан.Каждая итерация должна увеличивать непрозрачность на заданную величину с соответствующей задержкой между итерациями.Как уже упоминалось, jquery поставляется с функцией fadeIn ().

   Надеюсь, это поможет.