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

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

ただいまの
回答率

89.63%

safariでsubmitした時にjQueryでの処理が実行されません

解決済

回答 2

投稿 編集

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

nre

score 10

前提・実現したいこと

safariで検索した時(submit)に、cssアニメーションを表示できる様にしたいです。

発生している問題・エラーメッセージ

chromeでは検索時に隠れていたcssローディングアニメーションが表示されるのに、
safariでは表示されません。(クロームはPC,スマホでも問題なく動作確認済み)

該当のソースコード

<form method="get" action="/output">
        <input type="text" id=a name="name" style="width:350px;" 
        class='sample' placeholder="商品を入力して下さい">
    </form>
<script>
    $(function(){
        $('#loader').hide();
        $('form').on('submit',function(){
             $('#loader').fadeIn();
             $("#a").blur();
        });
    });
    </script>
main{

    max-width:100%;

}

h1{

    font-size: 400%;
   
}


p {
    font-size: 15px;


}    



.font_test {
    font-size: 150%;    /* 文字サイズ指定 */
    color: #bf0100;     /* 文字色指定 */
}

.font_tes{
    color: #bf0100;
}
body {
  text-align: center;
  background-color: #eee;
  position:relative;
  overflow: hidden;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


/* The loader container */
#loader {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 200px;
  height: 200px;

  margin-top: 115px;
  margin-left: -100px;

  perspective: 200px;
  transform-type: preserve-3d;
 }


/* The dot */
.dot {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 120px;
  height: 120px;

  margin-top: -60px;
  margin-left: -60px;

  border-radius: 100px;
  border: 40px outset #1e3f57;

  transform-type: preserve-3d;
  transform-origin: 50% 50%;

  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);

  background-color: transparent;

  animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite;
}

.dot:nth-child(2) {
  width: 140px;
  height: 140px;

  margin-top: -70px;
  margin-left: -70px;

  border-width: 30px;
  border-color: #447891;

  animation-name: dot2;
  animation-delay: 75ms;

  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
}

.dot:nth-child(3) {
  width: 160px;
  height: 160px;

  margin-top: -80px;
  margin-left: -80px;

  border-width: 20px;
  border-color: #6bb2cd;

  animation-name: dot3;
  animation-delay: 150ms;

  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
}

@keyframes dot1 {
  0% {
    border-color: #772525;
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
  50% {
    border-color: #774025;
    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
  }
  100% {
    border-color: #772525;
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
}

@keyframes dot2 {
  0% {
    border-color: #b54c4c;
    box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
  50% {
    border-color: #b56741;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
  }
  100% {
    border-color: #b54c4c;
    box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
}

@keyframes dot3 {
  0% {
    border-color: #e05555;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
  50% {
    border-color: #e08355;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
  }
  100% {
    border-color: #e05555;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
}

試したこと

<script>
    $(function(){
        $('#loader').hide();
        $('form').on('submit',function(){
             setTimeout(gogo,1)
        });
    });
    function gogo(){
        $('#loader').fadeIn();
            $("#a").blur();
}

    </script>


safariはsubmitと他の処理が同時に出来ないとの事だったのでsetTimeoutで処理を遅らせたりしてみましたがアニメーションが処理される事はありませんでした。

補足情報(FW/ツールのバージョンなど)

javascriptはhtml内に記載されております。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • fumito_94

    2019/06/24 22:54

    cssはどのようなものを記載していますでしょうか?

    キャンセル

  • nre

    2019/06/25 00:05

    かしこまりました。cssコードも追記いたしますのでご確認頂ければ幸いです。

    キャンセル

  • kei344

    2019/06/26 00:12

    https://teratail.com/help/question-tips#questionTips4-2
    > 4-2. どのように解決したのかを伝えましょう

    キャンセル

回答 2

0

fanction gogo(){ => function gogo(){

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/24 23:09

    すいません。こちらは私の記入ミスです修正いたします。

    キャンセル

check解決した方法

-1

無事に解決いたしました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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