如何制作更好的 jQuery 搜索框，从右到左调整大小然后我的？

Question

我正在尝试与页面右上角相同的搜索框：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>

Answer 1

给出一个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>

如何制作更好的 jQuery 搜索框，从右到左调整大小然后我的？

How to make better jQuery search box with resize from right to left then mine?

html

javascript

jquery

search-box