Как я могу иметь пуленепробиваемую кнопку отправки с динамическим фоном для окна поиска?

Question

Я застрял, искал, возился, собрал / обновил / протестировал мой код и повторил этот цикл десятки, если не более ста раз. Теперь я снова застрял и буду очень признателен за любую помощь.

---

Что я пытаюсь сделать:

• Кнопка поиска, которая плавно меняет графику (1->2) при наведении на нее, а также изменяет ее при нажатии (2->3). Будучи кнопкой поиска с текстовым полем рядом с ней, она должна была быть в форме как type="submit".
• Интегрируйте метод резервного копирования для JQuery, чтобы в случае, если у пользователя не было java или что-то не получилось на его конце, взялся за грубую визуализацию.css. Это вообще возможно?

---

Что мне удалось сделать:

• Успешно создана анимация кнопки в форме отправки с использованием только.CSS (и.png, который содержит все состояния анимации - спрайты изображений)
• Успешно создан JQuery-анимация кнопки (с плавным затуханием IN/OUT, но только для части при наведении мыши) - использует разные отдельные изображения для изменения анимации;

---

Основной корпус-фрагмент:

<form class="a" method="get" action="search.php">
    <input type="text" name="search" size=29 maxlength="255" style="position:relative; vertical-align:middle;">
    <input type="submit" name="button-submit" class="search_button" value="" style="border-style: none; vertical-align:middle;">
</form> 

.CSS используется автономной анимацией (без JQuery):

.a input[name="button-submit"] {
    width: 24px;
    height: 24px;
    background: url('../images/search_button.png') no-repeat 0px 0px;
    color: transparent;
    border: none;
    padding-left: 4px;
}

.a input[name="button-submit"]:hover {
    background: url('../images/search_button.png') no-repeat 0px -24px;
    color: transparent;
    border: none;
    padding-left: 4px;
}

.a input[name="button-submit"]:active {
    background: url('../images/search_button.png') no-repeat 0px -48px;
    color: transparent;
    border: none;
    padding-left: 4px;
}

.CSS используется JQuery:

input.search-button {
    background: transparent url(../images/search_normal.png) no-repeat left top;
    border: none;
    padding: 0;
    display: block;
    height: 24px; 
    width: 24px; 
    text-indent: -9999px;
    font-size: 1px;
}

.search-button-wrap {
    background: transparent url(../images/search_hover.png) no-repeat left top;
}

И JQuery анимации кнопки поиска:

$(document).ready(function(){
$('input.search-button').wrap('<div class="search-button-wrap" style="display: inline-block; vertical-align: middle;"></div>');
    $('input.search-button').hover(function() {
        $(this).stop().animate({ // Fade the button out when hovered
            'opacity': 0.01
        }, 300)
    }, function() {
        $(this).stop().animate({ // Fade it back in on mouseout
            'opacity': 1
        }, 300)
    });
})

---

Где я застрял

- Я застрял на том, чтобы сделать это в JQuery для части щелчка (изменение анимации с фона зависания на фон щелчка).

- Также застрял в интеграции brute-анимации.CSS (не имеет затухания) с анимацией JQuery, как способ резервного копирования в реальном времени на случай, если JQuery не работает на клиенте пользователя. Таким образом, чистая анимация.css включается, если есть ошибка с JQuery.

Кто-нибудь знает, как интегрировать простую резервную копию.css для анимации JQuery? Это вообще возможно? Даже если вы не знаете, не могли бы вы помочь мне с настройкой функции.click в JQuery для этой кнопки поиска? (при наведении курсора он переходит от обычного изображения к изображению при наведении, и при щелчке он должен переходить с изображения при наведении на изображение, на которое нажали)

Большое спасибо, ребята! Любая помощь приветствуется!