переместить div с эффектом скольжения на клик?JQuery

Question

Я провел быстрый тест с использованием CSS3, чтобы создать идею скользящих вкладок. Это можно увидеть здесь:

LINK

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

Дело в том, что я хотел бы сделать это так, чтобы это работало во всех браузерах, и с этим эффектом. Это возможно? Спасибо за ваше время!

HTML можно посмотреть на странице, CSS можно посмотреть здесь.

Answer 1

Для того, чтобы он работал во ВСЕХ браузерах, есть много вопросов, но чтобы добиться эффекта, работающего в большинстве основных настольных браузеров с jQuery, нужно что-то вроде этого:

Демонстрация: jsfiddle.net / Marcel / CKt58 ( в полноэкранном режиме )

И с интерактивными вкладками для закрытия панели:

Демонстрация: jsfiddle.net / Marcel / CKt58 / 1 ( в полноэкранном режиме )

Answer 2

используйте функцию animate () jquery, управляйте левой подпоркой, она будет работать в кросс-браузерном режиме, например:

http://jsfiddle.net/jackJoe/u4sCp/embedded/result/

вот скрипка: http://jsfiddle.net/jackJoe/u4sCp/

Теперь, это требует дополнительной работы, меняя вкладки + рассчитать ширину (слева). Я не знаю, намерены ли вы сдвинуть его на всю ширину экрана и т. Д ...

Answer 3

С точки зрения удобства использования я бы рекомендовал сделать так, чтобы все 4 вкладки двигались вправо, когда они выдвигаются. Это облегчит переключение между вкладками. Кроме того, это было бы действительно легко кодировать, и вам вообще не придется возиться с z-индексами.