Home/ Questions/Q 7780441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T18:53:55+00:00

http://jsfiddle.net/nFFuD/ I’m trying to animate the search field in this example using jquery, making

  • 0

http://jsfiddle.net/nFFuD/

I’m trying to animate the search field in this example using jquery, making it move to the top of it’s containing div oninput. I was originally using scriptaculous effect.move to do this, but I couldn’t make the event only fire once, so if someone kept typing after the first keystroke, the effect would stop and start again from it’s current position in the animation for each additional keystroke, which is stupid. I’m new to new to using jquery so please, take it easy if I’m not making very much sense.

EDIT: The example that ocanal posted definitely works, but for some reason it’s not working for me when I apply it – here’s what I currently have so far – also trying to fade a div on the same event

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Untitled</title>
<head>
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$('#search').keypress(function() {

    $(this).animate({
    top: '0',
  });

    $('#icon).fadeOut('slow', function() {

    }); 

});​

</script>
<style type="text/css" media="screen">

body {
    margin: 0px;
    padding: 0px;
}

#container {
    position: relative;
    border: #000 1px solid;
    margin: 0px auto;
    width: 960px;
    height: 800px;
}

input {
    outline: none;
}

#icon {
    position: absolute;
    top: 80px;
    left: 370px;
    width: 200px;
}

#search {
    position: absolute;
    top: 300px;
    left: 230px;
            width: 500px;           
}

</style>
</head>
<body>  
<div id="container">
    <img id="icon" src="icon.png" alt="icon">           
    <input id="search" type="text" autofocus="autofocus">
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    change works like blur, so you should do that with keypress event I think,

    $('#search').keypress(function() {

    $(this).animate({
    top: '0',
  });
});​

    http://jsfiddle.net/ocanal/nFFuD/7/

    EDIT:

    the code you shared is not working, because you should initialize event functions when dom is ready, you don’t need to use it in jsFiddle, because you can select the time when script will work.

    $(document).ready(function() {
//your functions.
});

    than it will work.

    $(document).ready(function() {
  $('#search').keypress(function() {

      $(this).animate({
      top: '0',
    });

      $('#icon').fadeOut('slow', function() {

      }); 

  });
});

    and here is your working code

    • 0