Q&A
コメレス 有難うございます。
すみません。 上記に関しブラウザアップデートによって 解決済みです。
（なぜかわかりませんが 正常に戻っています）と 思ったのですが
解決しておりません||orz
現在 HTMLでホームページを作成しているのですが jqueryのanimateを使い
fadeIn()の記述をしたところ ブラウザを立ち上げた時だけなぜか違う動きをします。
自分のさせたい動きは 画面左上のブラウザ外からロゴがまっすぐ落下し
bottom位置で ボールのように少し上下にリバウンドして止まるというものです。
ですが ブラウザを立ち上げた時だけ スタンバっている位置が真ん中になり
突然 現れたように画面の真ん中から左上に移動するのです。
なぜこのような動きになってしまうのでしょうか？
ちなみに ブラウザを立ち上げた時だけ起きる現象で 更新後は
自分が書いた通りの動きに戻ります。
CSSでのbottom等の設定位置が違っているのか jqueryのanimate記述に問題があるのか
わかりません。
どなたか解る方がおられましたら ご教授頂けますと幸いです。
宜しくお願い致します。
追記 自分の書いたscriptはこちらです↓
よろしくお願いします。
$(function(){
$(".main .a").css({ top: '-220px', //width: '220', //height: '219' }); //$(".main .b").css({ // right: '500px'
// });//
$(window).bind("load",function(){
$(".main .a").fadeIn(2000);
//e.preventDefault();
this.blur();
// var el = $('#' + this.href.split('#')[1]);
var method1 = "easeOutElastic";
//var method2 = "easeInBounce";
$(".main .a").animate({top: 100, marginLeft: 60, bottom: 0, },{duration: 800, easing: method1 ='easeOutElastic'}) .animate({marginLeft: 60, }, {duration: 100, easing: method1 ='easeOutElastic'}); $(".main .a").transition({ scaleX:1.5, scaleX:1.5, duration: 100 },{ scaleY:1.5, scaleY:1.5, duration: 100 });$(".main .a").transition({ scaleY:1.5, scaleY:1.5, duration: 100 },{ scaleX:1.5, scaleX:1.5, duration: 100 });$(".main .a").transition({ scaleY:1.0, scaleY:1.0, duration: 100 },{ scaleX:1.0, scaleX:1.0, duration: 100 });$(".main .a").transition({ scaleX:1.0, scaleX:1.0, duration: 100 },{ scaleY:1.0, scaleY:1.0, duration: 100 });
});
色々 コメントアウトしつつ 試行錯誤しているため
少し ごたついています すみません。（＞＜。）
回答3件
0
上記質問に関しまして
Windows７の時には上記の現象が起きていたのですが 10にアップデート
したところ ブラウザがHTML5に対応したのか現象が起きなくなりました。
と 記述しましたが ブラウザを閉じ立ち上げると再び現象が起きるため
自分なりに 原因を模索中です。
投稿2015/10/30 21:23
編集2015/10/30 23:31退会済みユーザー
総合スコア0
0
ベストアンサー
ikki57 さんの回答にもありますが…
具体的なコードを見てみないと確実なことは言えない
手元のコードもしくは現象を確認できるミニマムコードを提示してください。
あと、現象が発生するブラウザの種類とバージョンは？
最低限、IE（IEの場合はバージョンも）、Chrome、Firefox など数種類の実行結果を書いてください。
コードからは、どう意図して書いて記述なのか推測できない部分もあるので、おかしいところをコメントで記述しました。
javascript
1<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 2<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 3<script type="text/javascript"> 4 $(function () { 5 6 $(".main .a").css({ 7 top: '-220px' 8 }); 9 //$(window).bind("load", function(){ // 不要 $(function () {で同じ役目 10 $(".main .a").fadeIn(2000); 11 this.blur(); // this がさす内容不明。 documentに成るだろうけど…何の意味？？？ 12 // 13 var method1 = "easeOutElastic"; 14 //var method2 = "easeInBounce"; 15 16 $(".main .a").animate( 17 {top: 100, marginLeft: 60, bottom: 0, } 18 // , {duration: 800, easing: method1 = 'easeOutElastic'} // ここで代入する意味ない 19 , {duration: 800, easing: method1} 20 ).animate({marginLeft: 60} // 文法上許容されるブラウザもあるが、配列の最後のカンマは不具合の元 21 //, {duration: 100, easing: method1 = 'easeOutElastic'}// ここで代入する意味ない 22 , {duration: 100, easing: method1} 23 ); 24 //jQuery に transition というメソッドは存在しない。 25 //なので、以下全部間違い 26 //何を意図したコードなのかわからないので、コメントなし。 27// $(".main .a").transition({scaleX: 1.5, scaleX:1.5, duration: 100}, {scaleY: 1.5, scaleY:1.5, duration: 100}); 28// $(".main .a").transition({scaleY: 1.5, scaleY:1.5, duration: 100}, {scaleX: 1.5, scaleX:1.5, duration: 100}); 29// $(".main .a").transition({scaleY: 1.0, scaleY:1.0, duration: 100}, {scaleX: 1.0, scaleX:1.0, duration: 100}); 30// $(".main .a").transition({scaleX: 1.0, scaleX:1.0, duration: 100}, {scaleY: 1.0, scaleY:1.0, duration: 100}); 31 }); 32</script>
率直な感想を言うと…ネットで寄せ集めたコードを秩序なくただ書いてみただけという印象です。
決められたルールに則って書かないと、動くわけがありません。
**「自分の書いたすべてのソースコードについて説明できるように」**しましょう。
###JavaScript のデバッグについて
闇雲にソースをいじるのは、デバッグの方法としてナンセンスですし、何より時間の無駄ですから、「開発ツール」を使いこなしてください。
F12 開発者ツールを使用して JavaScript エラーをデバッグする
ブラウザの動き自体からは判断できない潜在的な不具合も事前に防止することができます。
javascript
1$(".main .a").transition({scaleX: 1.5, scaleX:1.5, duration: 100}, {scaleY: 1.5, scaleY:1.5, duration: 100}); 2$(".main .a").transition({scaleY: 1.5, scaleY:1.5, duration: 100}, {scaleX: 1.5, scaleX:1.5, duration: 100}); 3$(".main .a").transition({scaleY: 1.0, scaleY:1.0, duration: 100}, {scaleX: 1.0, scaleX:1.0, duration: 100}); 4$(".main .a").transition({scaleX: 1.0, scaleX:1.0, duration: 100}, {scaleY: 1.0, scaleY:1.0, duration: 100});
この部分、同じプロパティが二重に設定さてれいるのは正しい使い方なのだろうか。
javascript
1$(".main .a").transition({scaleX:1.5, duration: 100}, {scaleY:1.5, duration: 100}); 2$(".main .a").transition({scaleY:1.5, duration: 100}, {scaleX:1.5, duration: 100}); 3$(".main .a").transition({scaleY:1.0, duration: 100}, {scaleX:1.0, duration: 100}); 4$(".main .a").transition({scaleX:1.0, duration: 100}, {scaleY:1.0, duration: 100});
こうではないだろうか
あと、この4行はほぼ同時に実行されるので、一つ目の処理の終了を待たずに次が実行されるのでは？
現時点で、何のプラグインを使っているのかわからないので推測です。コールバックが用意されているのであればそれを使うか、メソッドチェーンで実装が正解か。これも推測。
以下のどちらも「transition」メソッドを使うようなので…
jquery.transition.js
jquery.transit
###とどのつまりはこういう風にしたいのではと推測して書いてみました
そのままコピペで動くと思います。当方、Mac のため IE での動作検証はできません、あしからず…
http でアクセスする場合は https を http に変更してください。
jquery.transition.js にはどうも transition メソッドないようなので、jquery.transit を使っております。
html
1<!DOCTYPE HTML> 2<html lang="ja-JP"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .a { 8 position: absolute; 9 display: none; 10 top: -220px; 11 } 12 </style> 13 </head> 14 <body> 15 16 <div class="main"> 17 <img class="a" src="https://dummyimage.com/100x100/000/fff" alt="ロゴ" /> 18 </div> 19 20 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 21 <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 22 <script type="text/javascript" src="https://raw.githubusercontent.com/rstacruz/jquery.transit/master/jquery.transit.js"></script> 23 <script type="text/javascript"> 24 $(function () { 25 var method1 = "easeOutElastic"; 26 $(".main .a").fadeIn(2000, function () { 27 $(".main .a").animate({top: 100, marginLeft: 60, bottom: 0}, 800, method1, function () { 28 $(this).animate({marginLeft: 60}, 100, method1, function () { 29 $(this).transition({scaleX: 1.5, scaleY: 1.5, duration: 100}, function () { 30 $(this).transition({scaleX: 1.0, scaleY: 1.0, duration: 100}); 31 }); 32 }); 33 }); 34 }); 35 }); 36 </script> 37 </body> 38</html>
動きを見やすくするため、duration を 1000 にしてみた
javascript
1 2 $(function () { 3 var method1 = "easeOutElastic"; 4 $(".main .a").fadeIn(2000, function () { 5 $(".main .a").animate({top: 100, marginLeft: 60, bottom: 0}, 800, method1, function () { 6 $(this).animate({marginLeft: 60}, 1000, method1, function () { 7 $(this).transition({scaleX: 1.5, scaleY: 1.5, duration: 1000}, function () { 8 $(this).transition({scaleX: 1.0, scaleY: 1.0, duration: 1000}); 9 }); 10 }); 11 }); 12 }); 13 });
###間違いがあったので修正
javascript
1<script type="text/javascript"> 2 $(function () { 3 var method1 = "easeOutElastic"; 4 $(".main .a").fadeIn(2000, function () { 5 $(this).animate({top: 100, marginLeft: 60, bottom: 0}, 800, method1, function () { 6 $(this).animate({marginLeft: 60}, 1000, method1, function () { 7 $(this).transition({scaleX: 1.5, scaleY: 1.5, duration: 1000}, function () { 8 $(this).transition({scaleX: 1.0, scaleY: 1.0, duration: 1000}); 9 }); 10 }); 11 }); 12 }); 13 }); 14</script>
投稿2015/10/30 19:07
編集2015/10/31 19:23退会済みユーザー
総合スコア0
＞ //jQuery に transition というメソッドは存在しない。
「jQuery transition Animate」はCSS3のtransitionアニメーションを利用するためのjQueryプラグインです。
だったらそれ、書いてよーーーー
何れにしても、
this.blur();
でJavaScript 処理止まりますね。（エラーで）
開発者ツールでも デベロッパーツールでも エラーは出ていません。
＞率直な感想を言うと…ネットで寄せ集めたコードを秩序なくただ書いてみただけという印象です。
決められたルールに則って書かないと、動くわけがありません。
申し訳ありませんが コピペではなく 自分で懸命に書いたものです。
> 開発者ツールでも デベロッパーツールでも エラーは出ていません。
提示していただいたコードからこれ以上のことは推測できませぬ。
本来意図した動き
> 画面左上のブラウザ外からロゴがまっすぐ落下し
> bottom位置で ボールのように少し上下にリバウンドして止まるというものです。
ブラウザ外＝正しい用語に直せば「ウィンドウ外」
「ロゴ」= おそらく何らかの画像「<img *>」classに「a」を設定している？
ということであれば、
$(".main .a").css({
top: '-220px'
});
で設定していることが間違い。CSSで設定すべき。$(function(){} の中に書いているので、ドキュメントが読み込まれてすぐに（人間が認識できる時間よりも短い時間で）動作するとは限らない。クライアントマシンのCPUがリソースを十分に確保されていない場合に、もたつくので、JavaScript の処理が遅れる。
> 申し訳ありませんが コピペではなく 自分で懸命に書いたものです。
それは失敬いたしました。
> jQuery transition Animate
似たものが複数あるようですねえ
https://github.com/louisremi/jquery.transition.js/blob/master/jquery.transition.js
https://github.com/rstacruz/jquery.transit
どちらを使っているんでしょう？もしくはその他？
ブラウザ外出はなくウインドウ外でしたね すみません。
https://github.com/louisremi/jquery.transition.js/blob/master/jquery.transition.js
で HPから出はなく 直接ファイルに落としてHTMLの<head>部に書いています。
jquery.transit.jsとしか記述していないのですが…
当時のサイトが見当たらりません
回答にもう少し時間を下さい。
プラグインはjquery.easing.1.3.jsです サイトは見つかりませんでした。
jquery.easing.1.3.js は 現在、jQuery UI に吸収されたはず…
ありました こちらですhttp://gsgd.co.uk/sandbox/jquery/easing/
jQuery UI に吸収… ですか…。
とりあえず、追記のコード動かしてみてくだされ。
...眠いので...寝ますzzzz。
easeOutElastic はやはり、jQuery UI に定義されておりますね。
http://api.jqueryui.com/easings/
jQuery UI か jquery.easing.js のどちらか一方で必要十分ですね。
Kosuke_Shibuyaさん 長々とお付き合いさせてしまい 申し訳ありませんでした
お疲れのところすみません。
ご助言 本当に有難うございました(*＾＾*)
頑張って 動かしてみます。
https://github.com/rstacruz/jquery.transit
によると、$('...').transition(options, [duration], [easing], [complete])
なので、$('...').transition(options, options, …, [duration], [easing], [complete])
という書き方はできないと思いますよ。
$(selector)transition({scaleX: 1.5, scaleY: 1.5, duration: 100}
で、X方向、Y方向設定しているので同じことだと…
Σ(゜ロ゜;)!! そうなのですね その辺も しっかり勉強し直し
ソースを正しく書けるようにしたいと思います。
実のところ 訓練校の先生に いっぺんに書けると教わったのが
ご指摘の 二重プロパティです。
鵜呑みにせず しっかり 調べて書きたいと思います(*＾＾*)
jquery.easing.1.3.jsも使って 画像を拡張させていたので上記の混在した
しっちゃかめっちゃかなプロパティにしてしまいました。
とっても恥ずかしいソースを書いてしまっていたんですね(ﾟ＿ﾟi)
お休みになるんでしたね すみません つい レスしてしまいました f(´－｀；)
有難うございました(*＾＾*)
> 実のところ 訓練校の先生に いっぺんに書けると教わった
そういうことですか、、、
うーん、この書き込みがバレる前に「ドヤ顔」で指摘してあげてください。
訓練校の先生の給料からいくらか貰わないといけませんねぇ…
QAサイトのありがちな間違いソースでよくあるのですが、
件の https://github.com/rstacruz/jquery.transit なども、
http://ascii.jp/elem/000/000/893/893746/ のような
紹介サイトだけ見て「動かん」というようなスレッドがあったりするのですが、
公式（配布元）のリファレンスを読んでない人が非常に多い…
仕様が変わっていたり、バージョンが変わっていたりするんだから、
公式リファレンスを読むことを避けてはいけないんですよね…
RTFM って略語があるくらいですが…
P.S. 今から寝ると…確実に昼夜逆転すると思われ…寝るのを我慢しますww
> 恥ずかしいソース
プログラマーをやる以上ずっと付きまといますので、気にとめることはありません。
かくいう自分も、「1年前に書いた自分のソース」は今になってみると
「恥ずかしいソース」です。「髪の毛が交代したのではない。私が前進しているのだ」といった某IT会社社長のように、「1年間で成長したんだ」と思えば…
ドヤ顔で指摘してやりますｗｗ
俺に任せとけ！！ Javascriptしっかり叩き込んでやる!!と言われて
教えられたのが 適当だったとは・・ 自分でも情けないです||orz
本当 給料差っ引いてもらいたいですねｗｗ
公式のリファレンス ですか… そういえばアルゴリズムもしっかり
覚えず うろ覚えです(；´Д｀)
教えて頂いたことは 全てしっかり読み返し もう一度 順序建てて
どこがダメだったのか 復習したいと思います。
すみません おはようございますにしてしまいましたね(ﾟ＿ﾟi)
ほんとに 有難うございました。 寝不足は体に触りますから
ゆっくりお休みくださいね(*＾＾*)
> 俺に任せとけ！！ Javascriptしっかり叩き込んでやる!!と言われて
> 教えられたのが 適当だったとは・・ 自分でも情けないです||orz
まあ、仕方がない。訓練校の指導員の報酬…安いっすからね、、、
プロパーでも普通開発案件の人月単価の6〜7割くらいだし。
入札とかで顔聞けばそれも投資のうちかとおもってやってる会社が多いんじゃないかなぁ…
なるほど だから適当なわけですねぇ～(;・∀・)
Σ(゜ロ゜;)!! え！？ マジですか！？ 募集案件見てやりますｗｗｗ
> だから適当なわけですねぇ～(;・∀・)
いえいえ、決して「適当」な訳ではないと思いますよ。
嫌味をいうわけじゃなくて、本当にです。
だから、適当なんじゃなくて、それが持っている技術力の限界なんだと思います。
中小の開発会社（特に派遣主体の）会社って技術的な知識の共有が不十分だったりするのでスキルアップしにくいのだと思います。もっとも同じ会社の同僚に顔をあわせる機会自体がないですからね。みんなそれぞれの派遣先にいってバラバラ。顔合わせるのも月に一回という感じですから…。
個人の意識次第では「エキスパート」にもなれるし、「凡庸ないちプログラマ」でいるしかない状況になり得るのです。
> 募集案件見てやりますｗｗｗ
あくまで、派遣人材ですから、ハローワーク側が支払う金額ではありませんよ〜
ututunyanco さんを担当する担当者が派遣かどうかはわかりませんしね。
運営母体が市町村単位なので、地域によっても金額が異なります。
ハローワーク
↓
一次請開発会社
↓
人材派遣会社
↓
募集条件
なので、かなり安い金額になっているはず…
ですね Javascript習得２年がかりだそうですから
技術力の限界は納得です。(;^_^A 、
ここだけの話 ちょっぴり臨時で雇われてましたが
それはそれは だらけた社風でしたねｗ
安い金額も納得のだらけ具合 でも 社保掛ず丸儲け
でしたね（自分はバイトなので違いますが…）
すみません ソースの手直しまでして頂いてΣヽ(°Д°;)ﾉ
しかも徹夜までさせてしまい申し訳ないのと
感謝でいっぱいです(┯┯＿┯┯)
なるほど。JavaScript 2年なら、妥当かな。
> しかも徹夜までさせてしまい申し訳ない
気にしないでください。日常のことですし、体操競技を見るために起きていたので…。
フリーランスなので、決してブラック会社じゃありませんw
そうでしたか(;^_^A 、ﾌｷﾌｷ
ブラック企業 自分のところはそんな感じに見えなくもなかったなｗｗ
体操 そういえば・・・ソースの挙動修正に夢中で…女子を見忘れた…。||orz
0
具体的なコードを見てみないと確実なことは言えないので、
可能性として、の話になり申し訳ありませんが、
ブラウザを立ち上げた時だけ起きる現象で 更新後は
自分が書いた通りの動きに戻ります。
ということは、各ファイル（html, js, css）を初めて読み込むので、
css等で設定した位置が反映される前に、jsのfadeIn等が実行され、
そのため、意図した位置とは異なる場所でそのような挙動が起こるのかもしれません。
ブラウザ更新の際は、各ファイルがブラウザにキャッシュされているので、
即時読み込まれるため、タイミングが意図した通りになり、意図した挙動になるのかもしれません。
ですので、jsの実行するタイミングを変えることで解決するかもしれません。
javascript
1// documentが読み込まれたら実行する 2$(document).ready(function(){ 3 // do something 4});
下記、省略形。
javascript
1$(function(){ 2 // do something 3});
下記に詳しく書かれています。
http://qiita.com/8845musign/items/88a8c693c84ba63cea1d
先述の通り他の可能性もありますので、上記はあくまで一例となりますがご了承ください。
投稿2015/10/30 01:26
編集2015/10/30 01:27
総合スコア290
迅速なご回答 有難うございます,,^^,,
Windows７の時には上記の現象が起きていたのですが 10にアップデート
したところ ブラウザがHTML5に対応したのか現象が起きなくなったと
思っていたのですが ブラウザを閉じもう一度 やり直したところ また
挙動不審に逆戻りしてしまいました。＞＜
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/10/30 21:26
退会済みユーザー
2015/10/30 21:53
退会済みユーザー
2015/10/30 21:56
退会済みユーザー
2015/10/30 22:01 編集