Как анимировать все элементы группы с помощью JQuery - пример меню? - PullRequest
Новая
       19

Как анимировать все элементы группы с помощью JQuery - пример меню?

0 голосов
/ 17 августа 2011

У меня есть пример: http://jsfiddle.net/kamaci/uVQZc/3/

Когда я оживляю больший синий div, я тоже хочу изменить размер этих кнопок. На самом деле я могу поместить больше элементов внутри этого div, и я могу поместить элементы внутри элементов. Поэтому мне нужна общая структура, которая при изменении размера контейнера большего размера внутри его элементов тоже.

Операция изменения размера может быть выполнена в процентах, но я не могу найти решение для этого: question1

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

Мне нужно меню с такими кнопками, как , простые , округленные квадраты (я думаю, это можно сделать с помощью CSS3), на самом деле, в качестве примера, если я могу использовать одно, чтобы эти кнопки были бы идеальными.

Я хочу использовать JQuery и Jquery Tools и HTML5. (Я не обладаю глубокими знаниями о CSS)

Спасибо.

1 Ответ

0 голосов
/ 17 августа 2011

Вы можете скопировать один из Jquery / Jquery Tools, получая меньший эффект , но он будет работать только в браузерах, совместимых с CSS3.Более надежное решение выглядело бы так:

См. JsFiddle

CSS: 

div {
  position: absolute;
  background-color: #abc;
  left: 110px;
  width: 300px;
  height: 200px;
  margin: 5px;
}
button {
  width: 32%;
  height: 48%;
  margin: 1% 0 0 1%;

  background: #00f;

  border: 1px solid #CCCCCC;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;

  background: -moz-linear-gradient(
    top,
    #f0f0f0 0%,
    #e3e3e3);
  background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#f0f0f0),
    to(#e3e3e3));
}

И удалите все пробелы между <button> sиначе вы получите пробелы между ними (глупо, но верно): 

<div id="fd" class="block">
<button type="button">1!</button><button type="button">2!</button><button type="button">3!</button><button type="button">4!</button><button type="button">5!</button><button type="button">6!</button>
</div>
...