Я намагаюся створити банер для верхньої частини сторінки, але ще не знайшов коду, який об'єднує все те, що мені потрібно. Я включив ілюстрацію того, що я намагаюся зробити.

A) У мене є 4 кнопки (кожен файл зображення), два з обох боків за замовчуванням в центрі. Це основне / неактивний стан.

Всі кнопки мали б подібну анімацію, коли вона зависала. Заради цього питання я тільки ілюстрував дві кнопки.

B) Якщо ви наведете курсор на ящик 1 (угорі ліворуч), кнопка зміниться, а текст і рядки будуть висуватися зліва направо. Крім того, центральне зображення зміниться. І, щоб зробити все складніше, ліва кнопка і центральне зображення будуть посилатися на сторінку 1. Коли ви йдете, текст переміщується вліво, а зображення повертається до стану за замовчуванням в A. Синя коробка буде вести себе таким же чином, посилаючись на Page 2.

C) Аналогічним чином, якщо ви наведете курсор на коробку 4 (внизу праворуч), кнопка зміниться, а текст і рядки будуть зрушуватися справа наліво. Крім того, центральне зображення зміниться. Права кнопка і центральне зображення будуть посилатися на сторінку 4. Коли ви відсувається, текст переміщується вправо, і зображення повертається до стану за замовчуванням в A. Зелений блок буде вести себе таким же чином, посилаючись на,

Найближче, що я знайшов, це: jQuery image slide on hover effect (horizontal) Я думав, що якби я використовував статичні зображення всіх (A) в якості фонового зображення, можливо, я міг би створити прозорий спрайт, тільки з активним версію наведеної кнопки і центральне зображення, для переміщення вліво або вправо при наведенні.

Я можу бачити, як наведений вище приклад міг би працювати для ящиків 1 і 3 (угорі ліворуч і праворуч) і створювати ілюзію ліній, зрушуються в міру того, як зображення ковзає як вліво, так і вправо, але я не впевнений, як це буде працювати Коробки 2 і 4.

Я на правильному шляху, або я прошу більше, ніж це можливо в JQuery? Мені було б непогано позбавитися від анімованого тексту (я міг би просто зробити їх частиною зображень наведення), але кнопки і центральне зображення потрібно міняти при наведенні, і їм потрібно зв'язати сторінку.