0

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

4 回答 4

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

      }); 

  });
});

这是你的工作代码

于 2012-04-12T17:29:39.143 回答
0

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

$('#search').on('keyup',function(){
    $(this).animate({
        top:0
    });                  
});​
于 2012-04-12T17:31:25.077 回答
0

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

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

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

});​
  • 不应该有+=。这意味着您将在当前顶部位置添加零并为其设置动画。0动画到实际顶部。
  • 顶级属性后不应有逗号
  • 您需要关闭animate函数的括号。
  • $('this')应该是$(this)。如果你用引号传递它，它实际上会寻找一个<this>当然不在你页面上的任何地方的元素，因为那不是有效的 HTML。
于 2012-04-12T17:30:00.837 回答
0

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

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

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

您还需要去掉 . 后面的逗号top: '0'。它在现代浏览器中可以正常工作，但 IE 不允许。

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

于 2012-04-12T17:33:46.137 回答