как изменить высоту div при наведении на него и с переходом (приоритет CSS без Javascript)

Question

Это код

HTML

<div id="footmain">
    <div id="col1" class="mark"></div>
    <div id="col2" class="mark"></div>
    <div id="col3" class="mark"></div>
    <div id="col4" class="mark"></div>
</div>

посмотрите пример с CSS, который у меня есть:

http://jsfiddle.net/EtBKx/8/

Мне нужно бросить его с переходом, начиная медленно, быстро, заканчивая медленно. jQuery - последний способ, потому что я хочу быть без JavaScript и для нескольких браузеров и процессорных скоростей.

Для совместимости с планшетами и смартфонами лучше иметь триггер в правом нижнем углу каждой вкладки с обеими функциями наведения и щелчка мышью? Или ссылкой <"a"> Направление <"/ a">. что можно нажать один раз, чтобы уронить, и еще один, чтобы пойти в направлении?

Answer 1

Я немного изменил вашу скрипку: http://jsfiddle.net/EtBKx/17/

В основном все, что я добавил, было

    *vendorprefix*-transition: height ease 1s;

«Легкость» определяет анимацию, которая начинается медленно, становится быстрой и заканчивается медленной.Да, у вас есть .mark: hover (с пробелом), который не работает, .mark: hover - это то, что вам нужно.

Подробнее о переходах: http://www.w3schools.com/css3/css3_transitions.asp http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

Answer 2

Решение jQuery (оно не замедляет работу вашего приложения):

http://jsfiddle.net/EtBKx/16/

Я написал только основной синтаксис, теперь вы можете заменить .cssс .animate и добавьте все необходимые эффекты.

---

Решение CSS3 (совместимо не со всеми браузерами)

http://jsfiddle.net/EtBKx/22/

---

РЕДАКТИРОВАТЬ:

Вы можете сослаться на эту ссылку