mootoolsとjQueryの共存がうまくいかず、エラーが出る。
mootoolsの「SlideIn」とjQueryの「lavalamp」を同時に動かしたいのですが、上手くいきません。。
共存がうまくいってないのとエラーがでます。
・SlideIn
ttp://solidstate.jp/ImageDisplay/effectAction/script_66.html
・lavalamp
ttp://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers
共存させるために、以下のURLを参考にしてます。
・jQuery⇒mootoolsの共存
ttp://h2ham.seesaa.net/article/106053238.html
・jQueryとprototype.jsを共存させる方法
ttp://www.css-lecture.com/log/javascript/029.html
最後の「この記述ですとjQueryの$をj$に書き換えなくて大丈夫です。」の部分の以下を使用してます。
<script type="text/javascript">
jQuery.noConflict()(function($){
var j$ = jQuery;
</script>
共存するためには「jquery_1.3.2.min.js」の下に、「jQuery.noConflict()(function($){」をもってくるようですが、
jqueryの方は順番の指定「jquery本体⇒easing⇒lavalamp」があるため順番変更ができません。。
そして、Firefoxでjavaエラーがでています。上が出ているエラー表示で、下がエラーの箇所です。
・missing } after function body
var j$ = jQuery;
・$(".lavaLamp") is null
$(".lavaLamp").lavaLamp({
・$('startFx') is null
$('startFx').addEvent('click', function (e){
共存させず、mootools、jqueryどちらも単体で動かした場合、正常動作しています。(エラーはでますが・・)
分かる方いましたら、回答おねがします。
javascript部分---------------------------------------------------------------------------------------------------------------------------------------------
<!--jquery-->
<script type="text/javascript" src="jquery_1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.1.js"></script>
<script type="text/javascript" src="jquery.lavalamp.js"></script>
<script type="text/javascript">
$(function() {
$(".lavaLamp").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
</script>
<!--共存記述-->
<script type="text/javascript">
jQuery.noConflict()(function($){
var j$ = jQuery;
</script>
<!--mootools-->
<script type="text/javascript" src="mootools.v1.11.js"></script>
<script type="text/javascript">
var SlideIn = {
start: function () {
var delay = 200; $$('.illust').each(function (el) { // ターゲットに付加するクラス名
el.setStyles({
'position': 'relative',
'top': 20, //要素の開始位置
'opacity': 0 //要素の最初のアルファ
});
var fx = el.effects({transition:Fx.Transitions.Back.easeOut});
fx.start.delay(delay, fx, {
'opacity': 1, //要素の最後のアルファ
'top': 0 //要素の終点の位置
});
delay += 200;
});
} };
window.addEvent('domready', function () {
SlideIn.start();
$('startFx').addEvent('click', function (e){
new Event(e).stop();
SlideIn.start();
});
});
</script>
お礼
補足
同じ条件で試してみても、 Failed to construct 'IntersectionObserver': Threshold values must be numbers between 0 and 1 というエラーが出てしまいますね。。 デモサイトでは不具合なく見れているので、拡張機能の問題かとも思いましたが、それもはずれでした。 何かほかに思い当たるものはございますでしょうか。 ご教示いただければ幸いです。