現在 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 });
});
色々 コメントアウトしつつ 試行錯誤しているため
少し ごたついています すみません。(><。)
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
上記質問に関しまして
Windows7の時には上記の現象が起きていたのですが 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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/10/30 23:05
退会済みユーザー
2015/10/30 23:09
退会済みユーザー
2015/10/30 23:12
退会済みユーザー
2015/10/30 23:29
退会済みユーザー
2015/10/30 23:42
退会済みユーザー
2015/10/30 23:55 編集
退会済みユーザー
2015/10/31 00:06
退会済みユーザー
2015/10/31 00:25
退会済みユーザー
2015/10/31 00:47
退会済みユーザー
2015/10/31 00:50
退会済みユーザー
2015/10/31 00:53
退会済みユーザー
2015/10/31 00:54
退会済みユーザー
2015/10/31 00:54
退会済みユーザー
2015/10/31 01:05 編集
退会済みユーザー
2015/10/31 01:08 編集
退会済みユーザー
2015/10/31 01:13 編集
退会済みユーザー
2015/10/31 01:13
退会済みユーザー
2015/10/31 01:16
退会済みユーザー
2015/10/31 01:18
退会済みユーザー
2015/10/31 01:42 編集
退会済みユーザー
2015/10/31 01:40
退会済みユーザー
2015/10/31 19:24 編集
退会済みユーザー
2015/10/31 02:05
退会済みユーザー
2015/10/31 02:31 編集
退会済みユーザー
2015/10/31 02:48 編集
退会済みユーザー
2015/10/31 02:50
退会済みユーザー
2015/10/31 03:02
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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/10/30 21:55 編集
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/10/30 21:26
退会済みユーザー
2015/10/30 21:53
退会済みユーザー
2015/10/30 21:56
退会済みユーザー
2015/10/30 22:01 編集