我正在尝试相同的搜索框，如页面右上角：Search Box
我有这个，但它不能正常工作：
$(document).ready(function(){
$("#search").mouseenter(function(){
$(this).stop().animate({marginLeft:'-40',width:"181"},300)
/*function(){
$(this).animate({marginLeft:'0',width:"141"},300)
});*/
});
$("#search").mouseleave(function(){
$(this).animate({marginLeft:'0',width:"141"},300);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form id="searchbox" action="">
<input id="search" type="text" placeholder="Type here">
<input id="submit" type="submit" value="Search">
</form>
</body>
</html>最佳答案
给出float: right或text-align: right：
$(document).ready(function() {
$("#search").css({
marginLeft: 0,
width: 141
});
$("#search").mouseenter(function() {
$(this).stop().animate({
marginLeft: '-40',
width: "181"
}, 300);
});
$("#search").mouseleave(function() {
$(this).animate({
marginLeft: 0,
width: "141"
}, 300);
});
});#searchbox {
text-align: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchbox" action="">
<input id="search" type="text" placeholder="Type here">
<input id="submit" type="submit" value="Search">
</form>关于javascript - 如何通过从右到左调整大小来制作更好的jQuery搜索框，然后再进行挖掘？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32570012/