Q&A
書式的にjQueryっぽいのでタグを追加したほうがよいでしょう
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
スクロールした際に文字が画面の5分の1のとこまできたらふわっと表示させる動きをつけたかったのですがうまくいかず頓挫しております。
発生している問題・エラーメッセージ
文字が一切動かないです。
エラーコードは以下です。
Uncaught SyntaxError: missing ) after argument list
該当のソースコード
HTML
<!DOCTYPE html> <html> <head> <meta charset ="UTF-8"> <title>Profile</title> <link rel ="stylesheet" type ="text/css" href ="style.css"> <script type ="text/javascript" src ="main.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Crete+Round&display=swap" rel="stylesheet"> </head> <body> <header class ="site-width"> <div id ="top"> <h1 class><a href ="#top">だーいしの自己紹介</a></h1> <nav id ="navigation"> <ul> <li><a href ="#top">TOP</a></li> <li><a href ="#profile">PROFILE</a></li> <li><a href ="#hobby">HOBBY</a></li> <li><a href ="#dream">DREAM</a></li> <li><a href ="#contact">CONTACT</a></li> </ul> </nav> </div> </header></body> </html><div id= "main"> <img src= "img/profile.png" class ="big-banner" alt ="profile" > <section id ="profile" class = "site-width"> <h1 class = "title">PROFILE</h1> <p> 広島県福山市生まれのだーいしです。 </p> <p> 一生 </p> <p class ="fadeIn"> 面白い </p> <p class="fadeIn"> ※(自分も周りも笑えるようなそんな状況を示してます。) </p> <p> 人生を過ごしたく奮闘中です。 </p> <p>かなり難しいので一緒に走れる方探してます!!</p> <p>いろんなこと知りたい知識欲が止まりませんので<br>知らない分野の方と、 いっぱいお話したいです。<p> <p>もしかするとそれが今後新しいビジネスや<br>一生涯の出会いにつながるかも！！ </p> </section> <section id="hobby" class ="site-width"> <h1 class ="title">趣味</h1> <section class ="panel"> <h2>Travel</h2> <div class="picture"> <img class ="panel-banner" alt ="travel" src ="img/travel.jpg"> </div> <p>初海外は台湾でしたが、もうそれはそれは刺激的で。それからアジアを６カ国巡りましたが 知らないことばかりでやはり刺激的。世界を見て感じよう！ 国内だけに目を向けてるとどうしても遅れてしまう。<br>世界の変化は凄まじい！ </p> </section> <section class ="panel"> <h2>Health</h2> <div class="picture"> <img class ="panel-banner" alt ="health" src ="img/health.jpg"> </div> <p> 健康に気を使って生活しています。側から見たらそれで人生楽しい？ ってよく言われるけど苦しんで死にたくないし、もっと時間を有効活用したい。 １０年後も若々しくあるために<br>コツコツ健康寿命伸ばします！! </p> </section> <section class ="panel"> <h2>Money</h2> <div class="picture"> <img class ="panel-banner" alt ="money" src ="img/money.jpg"> </div> <p> お金持ち批判したり、お金は汚いものとかいう人がいるけどお金がないとやっぱり 資本主義の中では大変よ。マネーリテラシーは絶対鍛えるべき。 日本円の価値の動向には非常に興味あります。<br>お金＝信用の度合い。 </p> </section> </section> <!--夢--> <section id="dream" class ="site-width"> <h1 class ="title">DREAM</h1> <section class ="dream1"> <h2 class ="dream1">No.1 若い人たちが活躍できるように</h2> <p class="dream-p"> 大学時代のお話になりますが、こういう働き方がしたいと思った時に 生の声を聞いてみたかったなという過去があります。 なので、今日の多様な働き方の情報を集めることのできるメディア、プラットホームの提供 を目指します。<br> それ自体youtubeやtwitterなどを用いるのも良いと思いますし、大々的なサービスで行なっていくのも 良いと思っております。<br> まずは一プレイヤーとしてエンジニアのキャリアを積むと同時にその立場としての知見 そしてサービス開発ができることを目標に取り組みます。 </p> <!--問題点 --> <div class="issue-h"> <h3>課題</h3> <ul class ="issue"> <li>たくさんの働き方を知りたかった</li> <li>リアルな社会人の声を聞きたかった</li> <li>お金出してでも情報知りたかった</li> </ul> </div> <div class ="solve-h"> <h3>解決</h3> <ul class ="solve"> <li>多種多様なお仕事を知れる場</li> <li>企業との接点が少ないサービス</li> <li>提供者にメリットがあるサービス</li> </ul> </div> </section> <section class ="dream2"> <h2 class="title">No.2 お金の情報提供</h2> <p class ="dream-p"> 日本人ってお金に対してマイナスのイメージを抱えてる人が多いことを感じます。<br> これは歴史上仕方ないことではあるのですが、<br>どうしてもその概念を取っ払わないと世界と戦えない と思っています。<br> なのでエンジニアという高給のポジションも活かした情報発信であったり、影響力で 日本のマネーリテラシーを小さなところから高めていきます。 </p> <div class="issue-h"> <h3>課題</h3> <ul class ="issue"> <li>お金＝悪という常識が蔓延っている。</li> <li>今の経済状況で幸せって得られるの？</li> <li>日本の抱える多数の問題で将来が不安。</li> </ul> </div> <div class ="solve-h"> <h3>解決</h3> <ul class ="solve"> <li>お金の大切さのお話</li> <li>今から対策すべきリアルな現実</li> <li>税金とかどうなってるかのお話</li> </ul> </div> </section> </section> <section id="contact" class ="site-width"> <h1 class ="title">CONTACT</h1> <div class ="contact"> <h2>↓こちらにDMお待ちしています↓</h2> <a href= "https://twitter.com/issiyrun"> <img class ="twitter" src ="img/twitter.jpg" alt ="twitter"> </a> <h2>↓youtubeでもお得情報発信してます↓</h2> <a href ="https://www.youtube.com/channel/UCzvZ6PRTsus8RNexSlTPiAw"> <img class ="youtube" src ="img/youtube.jpg" alt="youtube"> </a> </div> </section> </div> <footer> <p>いつでもお仕事募集しておりますので気軽にお声がけお願いします。進路相談もお待ちしてます。</p> </footer>
JS
$(document).ready(function(){
$(window).scroll(function(){
(".fadeIn").each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if(scroll > elemPos - windowHeight + 200){
$(this).addClass("scrollIn");
}
});
});
});
Javascript``` ### 試したこと }を消したりしましたが動かずです。
回答2件
0
$("red, attention" ,this).css("opacity" "0"); ここの前後に問題があるようなのですが
"opacity"と"0"の間にカンマがないため、構文エラーとなっています。
$("red, attention" ,this).css("opacity", "0"); ここの前後に問題があるようなのですが
投稿2019/07/09 11:41
総合スコア551
回答ありがとうございます。凡ミスでした。
続いてなのですが
Uncaught ReferenceError: $ is not defined
at main.js:1
改めて修正したのですが上記のメッセージが出てきました。
提起されていないとあるのですがどういった意味合いなのでしょうか？？
調べましたが解決できずでした。
$(function(){
$(".red , .attention").css("opacity","0");
$(window).scroll(function(){
var textPos = $(this).offset().top;
var scroll = $(window).scroll.Top();
var windowheight = $(window).height();
if(scroll > textPos - windowheight + windowheight/5 ){
$("red, attention",this).css("opacity", "1");
}else{
$("red, attention" ,this).css("opacity" ,"0");
}
});
});
0
ベストアンサー
jQueryを呼んでないので当該のスクリプトを実行する前にjQueryを読み込んでください
HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4/* 当該コード */ 5}); 6</script>
※jQuery3系であれば
投稿2019/07/10 00:51
総合スコア114742
あなたの回答
tips
プレビュー
