Question

http://jsfiddle.net/nFFuD/

我正在尝试使用jquery为此示例中的搜索字段设置动画，使其移动到包含div oninput的顶部。我最初使用的是scriptaculous effect.move这样做，但我不能让事件只发射一次，所以如果有人在第一次击键后继续输入，效果将停止并从动画中的当前位置再次开始额外的击键，这是愚蠢的。我是新手使用jquery所以请，如果我没有太多意义，请放轻松。

编辑：ocanal发布的例子确实有效，但由于某种原因，当我申请时它对我不起作用 - 这是我目前所拥有的 - 也试图淡化同一事件的div

<!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>

Answer 1

change就像blur一样，所以你应该使用我认为的按键事件来做到这一点，

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

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

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

修改

你共享的代码不起作用，因为你应该在dom准备就绪时初始化事件函数，你不需要在jsFiddle中使用它，因为你可以选择脚本工作的时间。

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

比它能起作用。

$(document).ready(function() { $('#search').keypress(function() { $(this).animate({ top: '0', }); $('#icon').fadeOut('slow', function() { }); }); });

and here is your working code

Answer 2

您的语法有一些错误。试试这个：

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

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

});

不应该有+=。这意味着您将向当前顶部位置添加零并为其设置动画。 0动画显示实际的顶部。
顶级属性
您需要关闭animate函数的括号。
$('this')应为$(this)。如果你用引号传递它，它实际上会查找<this>元素，当然这不是你页面上的任何地方，因为它不是有效的HTML。

Answer 3

你有一些语法错误;在编写代码时，我建议使用Firebug甚至Chrome / IE9中的Developer Tools来捕获这些错误。这段代码很好用：

$('#search').on('keyup',function(){
    $(this).animate({
        top:0
    });                  
});

Answer 4

您的脚本遇到了一些问题。这是我认为您想要做的工作版本：jsfiddle

$('#search').change(function() {
 $(this).animate({
   top: '0'
 })
})

首先，要调用函数内的元素，它$(this)不是$('this')。当某些内容出现在引号中时，它会引用特定元素。没有引号，它就是变量。

您还需要摆脱top: '0'之后的尾随逗号。它在现代浏览器中可以正常工作，但IE不会允许它。

您还缺少动画功能中的右括号。您应该使用控制台来发现这些错误。 Firefox中的Firebug，如果您正在使用Chrome，请右键单击该页面，然后单击＆＃34; Inspect element。＆＃34;控制台通过显示错误来帮助您进行调试。您还可以使用console.log()发送提醒。

fire jquery .animate oninput只有一次

4 个答案: