4

Webページの下部に小さなボックスを作成しようとしています。これは、スクロールすると展開/ポップアップし、マウスが離れると再び閉じます。

私は jsfiddle.net へのリンクを含むこの投稿を見つけました (私はこれをいじっていました)。しかし、ウェブサイトにポップしても実行できません（設定に関係があると思いますonLoadが、よくわかりません）。

これは私が JSFiddle で作成したものです:

JavaScript

$('#box').hover(function() {
  $(this).animate({
    height: '220px'
  }, 150);
}, function() {
  $(this).animate({
    height: '20px'
  }, 500);
});

CSS

#box {
  position: absolute;
  width: 300px;
  height: 20px;
  left: 33%;
  right: 33%;
  min-width: 32%;
  bottom: 0;
  background-color: #000000;
}

HTML

<div id="box"></div>

これは JSFiddle では正常に機能しますが、コードをファイルに挿入してリンクしようとすると機能しません。JSFiddle のドロップダウン ボックスを別のものに変更するとonLoad、onDomReady機能しなくなりますが、コードは変更されません。ですから、そのために何か他のものをどこかに追加する必要があると思います。

ご想像のとおり、私は JavaScript に関してはまったくの初心者なので、正しいことをしていないことは確かです。

JavaScript コードを保存して私の Web ページにリンクする方法を教えてください。JSFiddle とまったく同じように動作します。

4

1 に答える 1

4

DOM の準備が整うのを待つのではなく、このコードをすぐに実行しています。これは、要素#boxがまだ存在しない可能性があることを意味します。

jsFiddle はこのプロセスを自動化して、コードをよりクリーンにします。コードを自分の Web サイトに配置する場合は、自分で行う必要があります。それは非常に簡単です: コードを のイベントへのコールバックにreadydocument入れるだけです:

$(document).ready(function() {
    // put your Javascript here
});

または、ショートカット バージョン:

$(function(){
    // put your Javascript here
});

これらは意味的にも機能的にも同等です。

于 2011-02-08T18:35:46.263 に答える