質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.77%

  • jQuery

    6340questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQuery、ブラウザで開くたび挙動が安定しない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 279

namnium1125

score 1745

お世話になってます。m(_ _)m

発動条件がよくわからなかったので少し曖昧な質問です。すみません。。

<div id="hoge"></div>
#hoge {
  width: 150px;
  height: 150px;
}
$(function(){
  var hoge = $("#hoge");

  console.log(hoge.width());
  console.log($(hoge).width());
});

という感じのコードなのですが(実際のコードは長すぎますので載せません。必要があれば部分的に追記します)、コードをいじっていると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とか)には特に深い理由はないです。。お気になさらず。。(^ ^;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>submarine</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="./script.js"></script>
<link rel="stylesheet" href="./style.css" type="text/css" />
</head>
<body>
  <div id="screen">
    <img id="YSB" src="./images/yellowSubmarine.png" />
  </div>
</body>
</html>
var YSB;
var YSBDir = 1;
var YSBh;
var YSBw;

var scrn;
var barrett;

var enemyPython;
var intId;
var spawn;

$(function(){
  YSB = $("#YSB");
  YSBh = YSB.height()/2;
  YSBw = YSB.width()/2;

  // ↓該当箇所

  console.log(YSB.height());
  console.log(YSB.width());
  console.log($(YSB).height());
  console.log($(YSB).width());

  // ↑該当箇所

  scrn = $("#screen");
  barrett = $("<img>");
  barrett.attr({
    "src": "./images/barrett.png",
    "class": "barrett"
  });

  enemyPython = $("<div>");
  enemyPython.addClass("python");

  spawn = function(){
    if(Math.random()<0.5){
      var x = Math.floor(Math.random()*(window.innerWidth-enemyPython.width()));
      var y = Math.floor(Math.random()*(window.innerHeight-enemyPython.height()));
      var animationName = "vibration_right";
      if(x<window.innerWidth*0.5) animationName = "vibration_left";
      var eP = enemyPython.clone();
      eP.css({
        "top": y+"px",
        "left": x+"px",
        "opacity": 0,
        "animation-name": animationName
      });
      scrn.append(eP);
      eP.animate({
        "opacity": 1.0
      },500,"linear");
    }
  };

  scrn.on("click",function(e){
    var toX = e.pageX - YSBh;
    var toY = e.pageY - YSBw;

    if(YSB.offset().left > toX){
      YSB.css("animation-name","vibration_left");
      YSBDir = 1;
    }else{
      YSB.css("animation-name","vibration_right");
      YSBDir = -1;
    }
    YSB.animate({
      "left": toX+"px",
      "top": toY+"px"
    },250,"easeOutQuad");
  });

  YSB.on("click",function(e){
    e.stopPropagation();

    var b = barrett.clone();
    b.css({
      "top": e.pageY+"px",
      "left": e.pageX+"px"
    });
    scrn.append(b);
    if(YSBDir==1){
      b.animate({
        "left": "0px"
      },250,function(){
        b.remove();
      });
    }else{
      b.css("transform","scaleX(-1)");
      b.animate({
        "left": scrn.width()+"px"
      },250,function(){
        b.remove();
      });
    }
  });

  intId = setInterval(spawn,1500);
});
@charset "UTF-8";

#screen {
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 0px;
  padding: 0px;
  height: 120vh;
  width: 120vw;
  background-image: url(./images/marine.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
#YSB {
  position: absolute;
  height: 10vw;
  width: 10vw;
  left: 45vw;
  top: calc(50vh - 5vw);
  z-index: 1;

  animation: vibration_left 500ms ease-in-out 0s infinite alternate none running;
}

@keyframes vibration_left {
  0% {
    transform: translateY(-0.2vh) scaleX(1);
  }
  100% {
    transform: translateY(0.2vh) scaleX(1);
  }
}
@keyframes vibration_right {
  0% {
    transform: translateY(-0.2vh) scaleX(-1);
  }
  100% {
    transform: translateY(0.2vh) scaleX(-1);
  }
}

.barrett {
  position: absolute;
  height: 32px;
  width: 32px;
}

.python {
  position: absolute;
  height: 10vw;
  width: 10vw;
  background-image: url(./images/python_1.png);
  background-size: contain;

  animation: vibration_left 500ms ease-in-out 0s infinite alternate none running;
}

.crying {
  background-image: url(./images/python_2.png);
  animation: rolling 5000ms linear 0s 1 normal none running;
}

@keyframes rolling {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
    top: 100vh;
  }
}

.smiling {
  background-image: url(./images/python_3.png);
}

jQuery CDN : https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

とりあえず上記現象を確認できたブラウザ : 

  • MacのSafari ver11.0
  • Chrome バージョン61.0.3163.100
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/10/21 01:28

    書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。

    キャンセル

  • namnium1125

    2017/10/21 01:39

    ご指摘ありがとうございます。 再現ができないために質問した次第ですが、現在なるべくこちらでも再現できるよう目指しています。(元コード全部載せてもしょうがないので。。(^ ^;)

    キャンセル

  • kei344

    2017/10/21 01:43

    「hoge」という要素はHTMLにありません。それがimgなのかdivなのか何かを内包しているのかCSSが設定されているのかなど、影響する要素はたくさんあります。

    キャンセル

  • namnium1125

    2017/10/21 02:09

    おっしゃる通りだと思ったのと、部分的な再現は困難と判断し、元コードを載せることにいたしました。ご迷惑をおかけしました。、、ただ質問文中にも書いたのですが、コードを編集しなくとも、ブラウザを開きなおしたりリロードしたりするたびに挙動が異なるというのが最大の疑問です。

    キャンセル

回答 2

checkベストアンサー

+1

画像のロードより早く取得してしまっているのでは。

【[jQuery]Google Chromeで画像のwidthやheightがうまく取得できない場合の対処方法 « Codaholic】
http://codaholic.org/?p=1520

【jQueryで処理されるタイミング 【div箱の高さが取得できない!の原因1】 | アド企画 制作部】
http://dev.adokikaku.com/cat-js/99/div箱の高さが取得できない!の原因1/

【jQueryの$()は何をしているのか、DOMContentLoadedとloadの違い · GitHub】
https://gist.github.com/retorillo/83b37b09adf7b73d93f6

【DOMContentLoaded - Web 技術のリファレンス | MDN】
https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/21 02:26

    あ、解決してた。

    キャンセル

  • 2017/10/21 02:28

    なんかお騒がせしてすみませんでした、、(^ ^;

    普段のクセが禍していたみたいで、、

    キャンセル

0

実行タイミングの問題だったみたいです。。

修正前

$(function(){
    //処理
});


修正後

$(window).load(function(){
    //処理
});

初歩的なミスでした。。ご迷惑をおかけしました。。m(_ _)m

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6340questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。