只在输入时触发 jquery .animate 一次

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

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() {
      }); 
  });
});

这是您的工作代码

语法存在一些错误。试试这个：

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

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

你有一些语法错误;在编写代码时，我建议使用Firebug甚至Chrome/IE9中的开发人员工具来捕获此错误。这段代码工作得很好：

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

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

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

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

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

您在 animate 函数中还缺少一个右括号。您应该使用控制台来发现这些错误。Firefox 中的 Firebug，或者，如果您使用的是 Chrome，请右键单击该页面并单击"检查元素"。控制台通过显示错误来帮助您进行调试。您还可以使用 console.log() 在此处发送警报。

相关内容

最新更新

热门标签：