javascriptとjQueryを使ってHPを作成中です。
両言語とも初心者です。
jQueryは2つ以上読み込まない方がいいと言うのもあるみたいですが
今回はこちらにあるサイトの動きを模倣したいと考えてます。
ソースが載ってるGitHubにはjQueryを以下の通り2つ読み込んでるように思えます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://julian.com/research/velocity/build/jquery.velocity.min.js"></script>
複数のjQueryを読み込む場合は jQuery.noConflict(true)
と言う魔法の言葉あると参考にしたQiitaの記事で言われていたので試してみましたが、動きませんでした。
多分、書き方が悪いのだと思うのですが、、、
(良くないけど)ページに複数のjQueryを読み込む。 - Qiita
/hoge/script.jsをロードしようとすると Uncaught ReferenceError: $ is not defined
と言われてしまいます。
どなたか解決策をご存知の方いらっしゃったら、ご教授よろしくお願いします。
まず、jQueryは2つ以上読み込まないと言うお話も
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" type="image/ico" href="favicon_url">
<meta property="og:type" content="website">
<meta property="og:title" content="title">
<meta property="og:description" content="description">
<meta property="og:site_name" content="page.name">
<meta name="twitter:card" content="Summary with Large Image">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./page.css">
<link rel="stylesheet" type="text/css" href="https://hoge.jp/hoge/hoge/style.css">
</head>
<body>
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li><a href="#" data-content="The beginning">Home</a></li>
<li><a href="#" data-content="Curious?">About</a></li>
<li><a href="#" data-content="I got game">Skills</a></li>
<li><a href="#" data-content="Only the finest">Works</a></li>
<li><a href="#" data-content="Don't hesitate">Contact</a></li>
</ul>
</nav>
</div>
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://julian.com/research/velocity/build/jquery.velocity.min.js"></script>
<script type="text/javascript" src="http://julian.com/research/velocity/build/velocity.ui.js"></script>
<script type="text/javascript" src="/hoge/script.js"></script>
</body>
</html>
/hoge/script.js
$(function(){ ←エラーが発生しているところ。
$('.open-overlay').click(function() {
$('.open-overlay').css('pointer-events', 'none');
var overlay_navigation = $('.overlay-navigation'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
overlay_navigation.velocity('transition.slideLeftIn', {
duration: 300,
delay: 0,
begin: function() {
$('nav ul li').velocity('transition.perspectiveLeftIn', {
stagger: 150,
delay: 0,
complete: function() {
$('nav ul li a').velocity({
opacity: [1, 0],
}, {
delay: 10,
duration: 140
});
$('.open-overlay').css('pointer-events', 'auto');
}
})
}
})
} else {
$('.open-overlay').css('pointer-events', 'none');
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
$('nav ul li').velocity('transition.perspectiveRightOut', {
stagger: 150,
delay: 0,
complete: function() {
overlay_navigation.velocity('transition.fadeOut', {
delay: 0,
duration: 300,
complete: function() {
$('nav ul li a').velocity({
opacity: [0, 1],
}, {
delay: 0,
duration: 50
});
$('.open-overlay').css('pointer-events', 'auto');
}
});
}
})
}
})
});
jquery.velocity.min.js
は "velocity.js" と呼ばれるプラグインであって、jQuery を2回読み込んでいるわけではない気がします。Uncaught ReferenceError
は発生しないようです。質問の編集機能にコードスニペットで記述できる欄がありますのでこちら再現できるソースで記述してみてください。