お世話になってます。m(_ _)m
発動条件がよくわからなかったので少し曖昧な質問です。すみません。。
html
1<div id="hoge"></div>
css
1#hoge { 2 width: 150px; 3 height: 150px; 4}
javascript
1$(function(){ 2 var hoge = $("#hoge"); 3 4 console.log(hoge.width()); 5 console.log($(hoge).width()); 6});
という感じのコードなのですが(実際のコードは長すぎますので載せません。必要があれば部分的に追記します)、コードをいじっているとconsole.log($(hoge).width());
の方は正常に150
が表示されたのですが、console.log(hoge.width());
の方がいきなり0
と表示されるようになってしまいました。
コメントアウトして直るかを試すことで原因箇所を特定しようとしたのですが、全く同一のコードにも関わらず直ったり直らなかったりと不定で(ちなみにキャッシュ等は残っておらず変更はすぐに反映されてます。)、頭がこんがらがってきてしまいました。。
結局再現できないのでこうして質問した次第です。
何が原因なのでしょうか?
それともそもそもhoge.width()
みたいな書き方はダメで、全て$(hoge).width()
にしなければならないのでしょうか?
詳しい方、どうか回答よろしくお願いいたします。m(_ _)m
##追記
原因となる動作の一部が判明しましたので追記させてください。
ブラウザでリロードを行うとhoge.width()
の方で0
になってしまうみたいでした。ただし上記コードではなく元コードでの確認ですので、やはり他にも原因があるみたいです。
こういう挙動になってしまうということはやはりそもそもhoge.width()
って書くのはよくないってことなのでしょうか?
引き続き回答よろしくお願いいたします。m(_ _)m
##追記2
この質問の方向性が大きく変わってしまうのですが、$(hoge).width()
の方でもブラウザをリロードした時に0
になってしまうことに気づきました。。
またコードを全く編集しなくても、ブラウザを立ち上げ直したり等を繰り返すうちに直ったり直らなかったりと、やはり挙動が一定にならないです、、(firefoxは一定で、常に望む挙動でした)
html文書の読み込み順序等が影響しているのでしょうか?
部分的な再現は困難とみなし、本当は避けたかったのですが全コードを開示することにしました。コードの記述上まずい点があればご指摘ください。。。改めてよろしくお願いします。m(_ _)m
変数名(enemyPythonとか)には特に深い理由はないです。。お気になさらず。。(^ ^;
html
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>submarine</title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 7<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> 8<script src="./script.js"></script> 9<link rel="stylesheet" href="./style.css" type="text/css" /> 10</head> 11<body> 12 <div id="screen"> 13 <img id="YSB" src="./images/yellowSubmarine.png" /> 14 </div> 15</body> 16</html>
javascript
1var YSB; 2var YSBDir = 1; 3var YSBh; 4var YSBw; 5 6var scrn; 7var barrett; 8 9var enemyPython; 10var intId; 11var spawn; 12 13$(function(){ 14 YSB = $("#YSB"); 15 YSBh = YSB.height()/2; 16 YSBw = YSB.width()/2; 17 18 // ↓該当箇所 19 20 console.log(YSB.height()); 21 console.log(YSB.width()); 22 console.log($(YSB).height()); 23 console.log($(YSB).width()); 24 25 // ↑該当箇所 26 27 scrn = $("#screen"); 28 barrett = $("<img>"); 29 barrett.attr({ 30 "src": "./images/barrett.png", 31 "class": "barrett" 32 }); 33 34 enemyPython = $("<div>"); 35 enemyPython.addClass("python"); 36 37 spawn = function(){ 38 if(Math.random()<0.5){ 39 var x = Math.floor(Math.random()*(window.innerWidth-enemyPython.width())); 40 var y = Math.floor(Math.random()*(window.innerHeight-enemyPython.height())); 41 var animationName = "vibration_right"; 42 if(x<window.innerWidth*0.5) animationName = "vibration_left"; 43 var eP = enemyPython.clone(); 44 eP.css({ 45 "top": y+"px", 46 "left": x+"px", 47 "opacity": 0, 48 "animation-name": animationName 49 }); 50 scrn.append(eP); 51 eP.animate({ 52 "opacity": 1.0 53 },500,"linear"); 54 } 55 }; 56 57 scrn.on("click",function(e){ 58 var toX = e.pageX - YSBh; 59 var toY = e.pageY - YSBw; 60 61 if(YSB.offset().left > toX){ 62 YSB.css("animation-name","vibration_left"); 63 YSBDir = 1; 64 }else{ 65 YSB.css("animation-name","vibration_right"); 66 YSBDir = -1; 67 } 68 YSB.animate({ 69 "left": toX+"px", 70 "top": toY+"px" 71 },250,"easeOutQuad"); 72 }); 73 74 YSB.on("click",function(e){ 75 e.stopPropagation(); 76 77 var b = barrett.clone(); 78 b.css({ 79 "top": e.pageY+"px", 80 "left": e.pageX+"px" 81 }); 82 scrn.append(b); 83 if(YSBDir==1){ 84 b.animate({ 85 "left": "0px" 86 },250,function(){ 87 b.remove(); 88 }); 89 }else{ 90 b.css("transform","scaleX(-1)"); 91 b.animate({ 92 "left": scrn.width()+"px" 93 },250,function(){ 94 b.remove(); 95 }); 96 } 97 }); 98 99 intId = setInterval(spawn,1500); 100});
css
1@charset "UTF-8"; 2 3#screen { 4 position: absolute; 5 left: 0px; 6 top: 0px; 7 margin: 0px; 8 padding: 0px; 9 height: 120vh; 10 width: 120vw; 11 background-image: url(./images/marine.jpg); 12 background-position: center center; 13 background-repeat: no-repeat; 14 background-attachment: fixed; 15 background-size: cover; 16} 17#YSB { 18 position: absolute; 19 height: 10vw; 20 width: 10vw; 21 left: 45vw; 22 top: calc(50vh - 5vw); 23 z-index: 1; 24 25 animation: vibration_left 500ms ease-in-out 0s infinite alternate none running; 26} 27 28@keyframes vibration_left { 29 0% { 30 transform: translateY(-0.2vh) scaleX(1); 31 } 32 100% { 33 transform: translateY(0.2vh) scaleX(1); 34 } 35} 36@keyframes vibration_right { 37 0% { 38 transform: translateY(-0.2vh) scaleX(-1); 39 } 40 100% { 41 transform: translateY(0.2vh) scaleX(-1); 42 } 43} 44 45.barrett { 46 position: absolute; 47 height: 32px; 48 width: 32px; 49} 50 51.python { 52 position: absolute; 53 height: 10vw; 54 width: 10vw; 55 background-image: url(./images/python_1.png); 56 background-size: contain; 57 58 animation: vibration_left 500ms ease-in-out 0s infinite alternate none running; 59} 60 61.crying { 62 background-image: url(./images/python_2.png); 63 animation: rolling 5000ms linear 0s 1 normal none running; 64} 65 66@keyframes rolling { 67 0% { 68 transform: rotate(0deg); 69 } 70 50% { 71 transform: rotate(180deg); 72 } 73 100% { 74 transform: rotate(360deg); 75 top: 100vh; 76 } 77} 78 79.smiling { 80 background-image: url(./images/python_3.png); 81}
jQuery CDN : https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
とりあえず上記現象を確認できたブラウザ :
- MacのSafari ver11.0
- Chrome バージョン61.0.3163.100
回答2件
あなたの回答
tips
プレビュー