ボタンのIDを使用してイベントをクリックします

Question

私は冒険していて、いくつかのjavascriptとjqueryを学んでいます。私のプロジェクトでは、IDインラインのボタン要素があります。ボタンをクリックすると、別のdivをフェードインさせます。私は何かが不足していますが、私はこの言語に慣れていないので、私はスクリプトの機能が正しいと思いますか分かりません。

<span data-toggle="tooltip" data-placement="top" title="Open Radar Controls"> 
    <button id="play" class="map__control_icon"><i class="fa fa-play"></i></button> 
</span> 

上記IDがボタン要素とインラインであるため、多少の競合が発生している可能性があると考えます。だから私は以下を試して、divに包んだ。私はそれがよりクリーンでコードが少ないので、うまくいくなら上記の方法を好む。

<div id="play"> 
    <span data-toggle="tooltip" data-placement="top" title="Open Radar Controls"> 
     <button class="map__control_icon"><i class="fa fa-play"></i></button> 
    </span> 
</div> 

ここに私が呼び出しているスクリプトがあります。私は外部のjsファイルでそれを持っていますが、私はボタンで文書の中のファイルを呼び出しています。それが重要かどうかはわかりません。私は上記の両方のHTMLメソッドでヘッダーとボディの最後にコードを試しました。そしてnetherは動作するように見えました。私は何が欠けており、正しくないのですか？

$(document).ready(function() { 
    $("#play").click(function() { 
    $("#radar-control-container").fadeIn(1000); 
    }); 
}); 

おそらく私はコンソールエーテルでエラーが発生しています。

EDIT

私はスクリプトにmapAds divのを追加し、ボタンを押したときに、それがに仮定されているが、レーダー制御用コンテナのdivがそれをフェードしないようにそれはフェードアウト。だから私はそれが何もボタンで何もないことを知っている。私はそれがドキュメントの準備ができて隠されていると思うし、最初に表示するためにそれを変更するイベントが必要になるかもしれない？

$(document).ready(function() { 
    $("#play").click(function() { 
    $("#radar-control-container").delay(2000).fadeIn(1000); 
    $("#mapAds").fadeOut(1000); 
    }); 
}); 

Answer 1

次のように整理して設計されています。

を追加しました、これはその後、それが隠された状態だ...

.css('visibility', 'visible'). 

から完全なスクリプトを、それを表示します。

$(document).ready(function() { 
    $("#play").click(function() { 
    $("#radar-control-container").css('visibility', 'visible').delay(2000).fadeIn(1000); 
    $("#mapAds").fadeOut(1000); 
    }); 
}); 

うまくいけば、これは正しいです、正直な方向に私を指してくれてありがとう@charlietfl