1

我被卡住、搜索、修补、构建/升级/测试了我的代码，并且重复了这个循环几十次，如果不是超过一百次。现在我再次陷入困境，非常感谢任何帮助。

我要完成的工作：

  • 一个搜索按钮，当您将鼠标悬停在它上面时会平滑地更改图形 (1->2)，当您单击它时也会更改 (2->3)。作为一个带有文本框的搜索按钮，它必须采用 type="submit" 的形式。
  • 为 JQuery 集成一个备份方法，这样如果用户没有 java 或他的端出现故障，.css 暴力渲染将接管。这甚至可能吗？

我设法做到了：

  • 仅使用 .CSS（和包含所有动画状态的 .png - 图像精灵）成功地在提交表单中创建了按钮的动画
  • 成功创建按钮的JQuery动画（平滑淡入/淡出，但仅限鼠标悬停部分） - 使用不同的单个图像更改动画；

主体片段：

<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;
}

JQuery 使用的 .CSS：

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 中为点击部分发生（将动画从悬停背景更改为点击背景）。

- 还坚持将 .CSS 蛮力动画（没有淡入淡出）与 JQuery 动画集成，作为一种实时备份的方式，以防 JQuery 在用户的客户端上不起作用。因此，如果 JQuery 出现错误，纯 .css 动画就会启动。

有谁知道如何为 JQuery 动画集成一个普通的 .css 备份？甚至有可能吗？即使您不知道，您能否帮助我使 JQuery 中的 .click 功能适用于此搜索按钮？（悬停时它从普通图像过渡到悬停图像，单击时必须从悬停图像过渡到单击图像）

非常感谢你们！任何帮助表示赞赏！

4

0 回答 0