jQuery関数に関する質問

私のjQuery関数で興味深い結果が得られました。jQuery関数に関する質問

$(document).ready(function(){  //Fade menu when play is pressed 
    $('input').click(function(){ 
     $('menu').fadeOut(1000); 
    }); 
});

をそして、それはこのように私のHTMLに使われています：私は実行していますコードは次のようになります

<!DOCTYPE html> 
<html> 
    <head> 
     <script src='three.min.js'></script> 
     <script src='cannon.min.js'></script> 
     <script src='jquery2.2.2.min.js'></script> 
     <script src='game.js'></script> 
     <script src='jquery.js'></script> 
     <title>really beta game lmaoo</title> 
     <meta charset="utf-8"> 
     <style> 
      body { 
       background-image:url('Images/backgroundImg.jpg'); 
       background-repeat:no-repeat; 
       background-size:cover; 
      } 
      input { 
       position:absolute; 
       bottom:21%; 
       right:40%; 
      } 
     </style> 
    </head> 
    <body> 
     <menu> 
      <embed src='Audio/backgroundMusic.mp3' autoplay='true' loop='true' width='0' height='0'/> 
      <input type='image' src='Images/start.jpg' width='275' height='150' onclick='INIT_GAME();'/> 
     </menu> 
    </body> 
</html>

スクリプトはフェードプロセス全体を通じて明らかである興味深いブラックボックスの効果を、生産しています。なぜなら、<input>タグが私のJavaScriptからすぐにスクリプトをロードしているからで、私が作っているゲームを引き起こすからです。私はバックグラウンドとボタン全体をフェードアウトしようとしていて、ゲームにまっすぐ行く。ゲームがロードされるとスクロールバーが表示されるので、画面サイズも変化するようです。私はこの効果も望んでいません。私の質問は次のとおりです：

私のCSSボディスタイルで背景イメージをフェードアウトするにはどうすればいいですか？
fadeOutがを完了した後にINIT_GAME()関数を呼び出すにはどうすればよいですか？
私が使用しているCSSスタイルが、同じ名前のためにHTMLエレメントI とやりとりしたいのですか？

あなたがここに効果を表示することができます。
すべてのヘルプは歓迎されるhttps://scrigbildefense-browntj.c9users.io/main.html

、ありがとう！ CSSセレクタを使用しているJavaScriptを使用すると、要素に機能を追加する場合

出典

2016-03-26 Taylor Brown

フェードが完了した後の関数を実行するのフェードアウト、アーロンの答えについては：あなたはまた、オプションをチェックアウトすることができます

$(document).ready(function(){  //Fade menu when play is pressed 
    $('input').click(function(){ 
     $('menu').fadeOut(1000, function(d){ //function is called after animation completes. 

      INIT_GAME(); 
     }); 
    }); 
});

、あなたの背景画像用としてhttp://api.jquery.com/fadeout/

を見ます退色、あなたは体の中にイメージをロードするのが最善でしょう、そして、同じテクニックを使ってそのイメージを消してください。 ASAIK、あなたはCSSの背景を消すことはできません。

あなたの現在のコードはあなたのCSS名と矛盾していません。

ちょうどセレクタのルールを覚えて、これは私はいつもそれについて考える方法です：上記の

TEXT = element.type 
#TEXT = element.id 
.TEXT = element.class

どれも公式ではありません、それは私がjQueryのセレクタを覚えているだけの方法です。これは、競合を避けるためにも役立ちます。

出典

2016-03-26 03:39:38

これを覚えておくと良い方法です。これは多くの助けになりました。ありがとう！ –

$(document).ready(function(){  //Fade menu when play is pressed 
    $('input').click(function(){ 
     $('menu').fadeOut(1000, function(d){ 
      INIT_GAME(); 
     }); 
    }); 
});

HTML

<menu> 
     <embed src='Audio/backgroundMusic.mp3' autoplay='true' loop='true' width='0' height='0'/> 
     <input type='image' src='Images/start.jpg' width='275' height='150'/> 
    </menu>

競合CSSが問題になることができます。同じIDまたはクラスを持つ別の要素のスタイルを設定しようとしている他のCSSと競合する可能性もあります。通常、これは問題ではありません。

出典

2016-03-26 03:29:58

これは私がこれにアプローチする方法です。

まず、動的コンテンツの場合はイベント委譲を使用するか、将来追加する場合はイベントの委任を使用し、実際に入力しようとしている要素までドリルダウンすることができます。

$(document).ready(function(){ 
    //we start by targeting the click on the parent element of input  
    $('menu').on('click', 'input', function(){ 
     //then run init_game as a callback of fadeout 
     $(this).fadeOut(1000, function(){ 
       init_game(); 
     }); 
     }); 
    }); 

function init_game(){ 
    console.log('the game is going!!'); 
    } 

//init_game can be removed from your html

出典

2016-03-26 03:39:09 absentx

答えて

関連する問題