【发布时间】：2011-05-01 14:20:22
【问题描述】：
我正在尝试创建一个时尚的搜索功能，但它似乎无法正常工作。但是我无法向您解释整个代码，但是您可以看到问题演示页面（底部的链接）。问题是当用户在搜索查询中输入字符串时，我想动态搜索与该字符串匹配的关键字，并使用Ajax 和PHP 在下拉（淡出）div 元素上显示结果。但目前它没有这样的功能。但我刚刚在该div 元素中添加了一个框架类型的示例内容。
因此，当用户输入字符串时，div 元素会淡入，但当用户将鼠标悬停在它上面时，它就会淡出。我不知道问题是什么。所以请查看问题演示页面并查看代码，但我也在下面发布了 Jquery 代码，仅供帮助。但是对于 HTML 代码，您必须查看此页面。谁能帮我解决这个问题，如果您想了解更多信息，请告诉我，我会提供。
<html>
<head>
head including scripts here......
<script type="text/javascript">
$(document).ready(function() {
$('div#search-bar').mouseover(function() {
$(this).stop().animate({ opacity : '1.0', top : '51px' },200,'linear',function () {
$('input.search-textbox', this).focus();
});
$('div.site-select span img').stop().animate({ opacity : '0.5' },200,'linear',function () {});
$('img.search-button').stop().animate({ opacity : '0.6' },200,'linear',function () {});
});
$('div#search-bar').mouseout(function() {
$(this).stop().animate({ opacity : '0.9', top : '60px' },200,'linear',function (e) {
$('input.search-textbox', this).blur();
$('div.search-keywords-framework').css('opacity','0.0').stop();
});
$('div.site-select span img').stop().animate({ opacity : '0.2' },200,'linear',function () {});
$('img.search-button').stop().animate({ opacity : '0.4' },200,'linear',function () {});
});
$('input.search-textbox').keyup(function (e) {
if ($('div.search-keywords-framework').css('opacity')==0)
{
$('div.search-keywords-framework').animate({ opacity : '1.0' },200,'linear',function () {$(this).stop();});
}
});
$('div.search-keywords-framework').mouseover(function () {
$('div#search-bar').css('opacity','1.0');
});
$('div.search-keywords-framework').click(function () {
$('div#search-bar').css('opacity','1.0');
});
$('div.site-select span img.prev').mouseover(function () {
$(this).animate({ opacity : '1.0' },200,'linear',function () { $(this).stop(); });
});
$('div.site-select span img.next').mouseover(function () {
$(this).animate({ opacity : '1.0' },200,'linear',function () { $(this).stop(); });
});
$('div.site-select span img').mouseout(function () {
$(this).animate({ opacity : '0.5' },100,'linear',function () { $(this).stop(); });
});
$('div.site-select span img.next').click(function () {
$(this).animate({ opacity : '1.0' },100,'linear',function () { });
});
$('div.site-select span img.prev').click(function () {
$(this).animate({ opacity : '1.0' },100,'linear',function () { });
});
$('img.search-button').mouseover(function () {
$(this).animate({ opacity : '1.0' },100,'linear',function () { $(this).stop(); });
});
$('img.search-button').mouseout(function () {
$(this).animate({ opacity : '0.6' },250,'linear',function () { $(this).stop(); });
});
$('div.site-select div.select-frame').cycle({
fx: 'fade',
speed: 500,
prev: 'div.site-select span img.prev',
next: 'div.site-select span img.next',
timeout: 0,
pause: 1,
cleartype: true,
before: selectsitetext,
after: selectsitetext
});
function selectsitetext() {
$('div.site-select input#select-site-text').val($(this).text());
}
$('a.menu-button').mouseover(function () {
$('img.over',this).stop().animate({ opacity : '1.0' },200,'linear',function () {});
});
$('a.menu-button').mouseout(function () {
$('img.over',this).stop().animate({ opacity : '0.0' },150,'linear',function () {});
$('img.click',this).stop().animate({ opacity : '0.0' },150,'linear',function () {});
});
$('a.menu-button').click(function (e) {
e.preventDefault();
$('img.click',this).stop().animate({ opacity : '1.0' },100,'linear',function () {});
});
});
</script>
</head>
<body>
other header framework here............
<div id="search-bar">
<table width="500px" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="search-frame-base-textbox-left"></td>
<td class="search-frame-base-textbox-mid">
<input type="textbox" class="search-textbox" />
<div class="search-keywords-framework" style="position: absolute; z-index: 500; margin: 0px 0px 0px -30px; opacity: 0.0;">
<table cellpadding="0" cellspacing="0" width="350px" style="font-family: Droid Sans; font-size: 12px;">
<tbody>
<tr>
<td style="background:url('img/search-keyword-bsae-top-left.png');width:17px;height:17px;background-repeat:no-repeat;"></td>
<td style="background:url('img/search-keyword-bsae-top-mid.png');height:17px;background-repeat:repeat-x;"></td>
<td style="background:url('img/search-keyword-bsae-top-right.png');width:17px;height:17px;background-repeat:no-repeat;"></td>
</tr>
<tr>
<td style="background:url('img/search-keyword-bsae-mid-left.png');width:17px;background-repeat:repeat-y;"></td>
<td style="background: rgb(242,242,242);">
<div style="padding: 5px 5px; width: 100%;"><a href="#" style="color: #333; text-decoration: none; font-size: 12px;">Search Demo 1</a><font style="float: right; background: #333; color: #fff; font-size: 10px; padding: 2px 5px; margin-right: 10px;">26</font></div>
<br>
And much more similiar keywords...........
</td>
<td style="background:url('img/search-keyword-bsae-mid-right.png');width:17px;background-repeat:repeat-y;"></td>
</tr>
<tr>
<td style="background:url('img/search-keyword-bsae-bottom-left.png');width:17px;height:17px;background-repeat:no-repeat;"></td>
<td style="background:url('img/search-keyword-bsae-bottom-mid.png');height:17px;background-repeat:repeat-x;"></td>
<td style="background:url('img/search-keyword-bsae-bottom-right.png');width:17px;height:17px;background-repeat:no-repeat;"></td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="search-frame-base-textbox-right"></td>
<td class="search-frame-base-site-bg">
<div class="site-select">
<div class="select-frame">
<font>All</font>
<font>Games</font>
<font>Music</font>
<font>Videos</font>
</div>
<span class="search-select-sites-nav-frame">
<img width="25px" height="21px" class="next" src="img/search-frame-base-site-trigger-close.png" />
<img width="25px" height="21px" class="prev" src="img/search-frame-base-site-trigger.png" />
</span>
<input type="hidden" id="select-site-text" />
</div>
</td>
<td class="search-frame-base-site-sep"></td>
<td class="search-frame-base-button-bg">
<img width="28px" height="30px" class="search-button" src="img/search-frame-base-button.png" />
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
footer framework...........
</body>
</html>
【问题讨论】：
-
引用问题中的相关代码。人们不必通过链接来帮助您，并且可以移动、删除、修改外部资源等。 StackOverflow 旨在提供帮助，不仅现在对您有用，而且对其他有类似问题的人也有用。 - 线。
-
对不起，伙计，代码太长，无法插入，但如果你想在这里，你可以去。
-
当我将鼠标移到 div
search-keywords-framework上时，没关系。但是，当我将鼠标移出它或移出搜索输入时，它就会消失。我认为问题出在输入中，因为当我将鼠标移出它时，它会丢失焦点事件。 -
@Jack：“抱歉，哥们，代码太长了”那么你的工作就是把它归结为基本要素。
-
好的，我会做的，给我一些时间。
标签： jquery html ajax animation jquery-animate