Create a search animation sliding the text input part from the right to left

问题

I want to create a animation on search loop icon when hovering in it.First the loop only is displayed like this picture enter image description here

And when I will hover on the loop icon the text input must appear from the right inceasing its width to left and get 100% width. I tried this code

jQuery(".main_search .search-field").focusin(function() {
        jQuery(".main_search .screen-reader-text").css( "display", "none");
    });
    jQuery(".main_search .search-field").focusout(function() {
        jQuery(".main_search .screen-reader-text").css( "display", "block");
    });

But it looks like a bug. HTMl structure

<div class="about_search">
                <form role="search" method="get" class="search-form" action="http://argentarius.ipoint.com.mt/">
            <label>
                <span class="screen-reader-text">Search for:</span>
                <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
            </label>
            <input type="submit" class="search-submit" value="Search">
        </form>                </div>

回答1:

Here is your fixed Fiddle:

var CloseAnimationTimeout;

jQuery('.about_search .search-submit, .about_search .search-form label ').mouseover(function() {
    clearTimeout(CloseAnimationTimeout);
    jQuery('.about_search .search-form label').stop().animate({
      width: '94%'
    }, 'slow');
  })
  .mouseout(function() {
    CloseAnimationTimeout = setTimeout(function() {
      jQuery('.about_search .search-form label').stop().animate({
        width: '0%'
      }, 'slow');
    }, 500);
  });

.about_search .search-form {
  height: 40px;
  margin-right: 20px;
  position: relative;
}
.about_search .search-form label {
  width: 0%;
  height: 38px;
  transition: opacity 0.5s linear;
  -moz-transition: opacity 0.5s linear;
  -webkit-transition: opacity 0.5s linear;
  -o-transition: opacity 0.5s linear;
  border: 0;
  background: #000;
  margin-top: 50px;
  right: 0;
  float: right;
}
.about_search .screen-reader-text {
  display: none;
  position: absolute;
  padding-left: 50px;
  line-height: 40px;
  font-size: 16px;
  color: #000;
}
.about_search .search-field {
  width: 100%%;
  height: 100%;
  padding: 0px;
  background: #000;
  color: #fff;
  border: 0;
}
.about_search .search-submit {
  background: url('http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/loop.png') no-repeat #11213b;
  padding: 19px;
  margin-top: 0px;
  background-position: 9px 9px;
  position: relative;
  z-index: 100;
  outline: none;
  margin-left: -27px;
  border: none;
  font-size: 0;
  float: right;
  height: 18px;
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="about_search">
  <form role="search" method="get" class="search-form" action="http://argentarius.ipoint.com.mt/">
    <input type="submit" class="search-submit" value="Search" />
    <label style="width: 0%;">	<span class="screen-reader-text">Search for:</span>

      <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
    </label>
  </form>
</div>

EXPLANATION:

if you want the input to open up from the right, you need to anchor it to the right by setting its css to 'right:0;' and by floating it to the right.
since floating stacks the elements by their order in the html, you need to move the button before the label for proper floating.
the input inside the label needs to be stretched to 100% at all times, because you change the width of the label dynamically, the inout inside will adjust.
since color of label is black, i changed the color of the input to white.
changed the hover in/out handler from the form to the actual button + the label itself for better performance.
added a delay to the closing animation using a timeout function to prevent it from stuttering and closing whenever you move the mouse

回答2:

The code you posted wont do anything with a picture since you can't focusin or focusout on a picture.

first you need to use

jQuery(".main_search .search-field").mouseover(function(){});
/* and*/
jQuery(".main_search .search-field").mouseout(function(){});

i made a jsfiddle that does the trick

i hope that is what you were looking for

Sidenote: $(element).stop() is used to stop the animation from getting put into a queue. if you don't use stop() and a user keeps hovering over the div or picture the animations will queue up which is kinda annoying.

来源：https://stackoverflow.com/questions/28895768/create-a-search-animation-sliding-the-text-input-part-from-the-right-to-left

标签

jquery

animation