0

http://jsfiddle.net/nFFuD/

この例では、jqueryを使用して検索フィールドをアニメーション化し、divoninputを含む検索フィールドの先頭に移動しようとしています。私はもともとscriptaculouseffect.moveを使用してこれを実行していましたが、イベントを1回だけ発生させることはできなかったため、最初のキーストロークの後で誰かが入力し続けると、エフェクトは停止し、それぞれのアニメーションの現在の位置から再開します。愚かな追加のキーストローク。私は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

構文にいくつかのエラーがあります。これを試して：

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

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

});​
  • あるべきではありません+=。これは、現在の一番上の位置にゼロを追加し、それにアニメートすることを意味します。0実際のトップにアニメートします。
  • topプロパティの後にコンマを入れないでください
  • 関数の括弧を閉じる必要がありanimateます。
  • $('this')である必要があります$(this)。引用符で囲むと、実際には、<this>有効なHTMLではないため、ページのどこにも存在しない要素が検索されます。
于 2012-04-12T17:30:00.837 に答える
0

いくつかの構文エラーが発生しました。コードを書くときは、FirebugまたはChrome/IE9の開発ツールを使用してこのエラーをキャッチすることをお勧めします。このコードは問題なく機能します。

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

スクリプトにいくつか問題がありました。これがあなたがやりたいと思うことの実用的なバージョンです：jsfiddle

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

まず、関数内の要素を呼び出すために、それはで$(this)はありません$('this')。何かが引用符で囲まれている場合、それは特定の要素を参照しています。引用符がない場合、それは変数です。

また、。の後の末尾のコンマを削除する必要がありますtop: '0'。最新のブラウザでは正常に動作しますが、IEでは許可されません。

また、アニメーション関数内に閉じ括弧がありませんでした。これらのエラーを見つけるには、コンソールを使用する必要があります。FirefoxのFirebug、またはChromeを使用している場合は、ページを右クリックして[要素の検査]をクリックします。コンソールは、エラーを表示することでデバッグに役立ちます。を使用してアラートを送信することもできますconsole.log()。

于 2012-04-12T17:33:46.137 に答える