使用jquery动画按钮

有人可以帮助我使用jquery或javascript帮助我的搜索按钮。每当用户悬停我的搜索按钮时，我希望搜索框出现（并保持可见状态，同时用户stil在那里搜索某物），但是当鼠标远离搜索按钮或搜索框时，这个小盒子应该消失。使用jquery动画按钮

<div class = "searchBox"> 
    <p id = "paragraph"><input type = "text" name = "serachBar"/> 
    <input type = "button" value = "szukaj" name = "search"/> 
    </p> 
    <div id = "searchButton"><a href = "#">Search</a></div> 
</div>

CSS

body{ 
background-color:rgb(138,187,129); 

#searchButton{ 
position:fixed; 
border:1px solid rgb(255,255,255); 
border-top:none; 
width:80px; 
height:30px; 
top:0px; 
right:60px; 
border-radius:0px 0px 3px 3px; 
background:rgb(30,114,41); 
} 
#searchButton :hover{ 
background:rgba(0,0,0,0.3); 
} 
#searchButton a{ 
text-decoration:none; 
font-size:20px; 
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; 
text-align:center; 
color:white; 
padding:0; 
margin:0; 
display:block; 
height:100%; 
width:100%; 
} 

.searchBox p{ 
position:fixed; 
border-bottom:1px solid rgba(255,255,255,0.3); 
border-radius:2px; 
box-shadow:0 1px 2px 2px #1F0000; 
-moz-box-shadow:0 1px 2px 2px #1F0000; 
-webkit-box-shadow:0 1px 2px 2px #1F0000; 
border-top:none; 
background:rgba(0,0,0,0.2); 
width:200px; 
height:50px; 
top:0; 
right:0; 
margin:0; 
visibility:hidden; 
font-size:15px; 
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; 
color:white; 
}

来源

2013-04-26 user2167174

你应该张贴，是有关您的问题的代码 - 我们大多数人都不爱读无关的代码。 – 2013-04-26 19:05:43

只是一个快速的答案真的。您可能需要修改，使之适合你需要确切的话，但我相信那种jQuery的，你追求的是以下几点：

$(document).ready(function(){ 
    $('#submit, #searchField').on('mouseenter', function(){ 
     $('#searchField').fadeIn(400);  
    }); 
    $('#submit, #searchField').on('mouseleave', function(){ 
     $('#searchField').fadeOut(400);  
    }); 
});

HTML：

<form> 
    <input type="text" name="searchField" id="searchField"/> 
    <input type="submit" id="submit" value="submit"/> 
</form>

这里有一个fiddle太

来源

2013-04-26 19:15:36

将mouseenter/mouseleave事件绑定到'.searchBox' – nullability 2013-04-26 19:17:16

好吧，也许如果我用javascript来做，我需要写入函数来让这个盒子弹出并再次隐藏，或者我可以做它以某种方式以一种更简单的方式吗？我需要做出像onmouseover =“function1（）”和onmouseout =“function2（）”这样的卑鄙行为吗？ – user2167174 2013-04-26 19:29:35

上面编写的代码可以隐藏和显示某些元素在鼠标悬停或鼠标离开时自动显示的代码。那里的代码适用于你的原始问题，我相信。至少这是我从你的问题中得到的！哈哈 – 2013-04-26 19:31:26

所以这是一个办法。只需在搜索框和搜索按钮之外设置一个div即可。然后设置一个mouseenter和mouseleave事件。您还需要检查是否输入了任何文字。继承人小提琴：http://jsfiddle.net/bgs7D/

var $divContainer = $('#divContainer'), 
$txtSearch = $('#txtSearch'), 
$btnSearch = $('#btnSearch'); 

$txtSearch.hide(); 

$divContainer.on('mouseenter',function(){ 
    $txtSearch.show(); 
}); 

$divContainer.on('mouseleave',function(){ 
    if($txtSearch.val()==''){ 
     $txtSearch.hide(); 
    } 
});

和HTML：

<div id= "divContainer"> 
<input id="txtSearch" type ="text" ></input> 
<input id="btnSearch" type = "button" value="Search" ></input> 
</div>

来源

2013-04-26 19:34:25 SDeezy

使用jquery动画按钮

回答

相关问题