我被卡住、搜索、修补、构建/升级/测试了我的代码,并且重复了这个循环几十次,如果不是超过一百次。现在我再次陷入困境,非常感谢任何帮助。
我要完成的工作:
- 一个搜索按钮,当您将鼠标悬停在它上面时会平滑地更改图形 (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 功能适用于此搜索按钮?(悬停时它从普通图像过渡到悬停图像,单击时必须从悬停图像过渡到单击图像)
非常感谢你们!任何帮助表示赞赏!