使用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動畫按鈕

回答

相關問題