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>

回答No.6

fujillin · ベストアンサー

#1です。

#4の補足を読む限りだと、ライブラリは修正する必要がないみたいなので、
以下のようにするだけでいけそうな気がする。（理由は#5の直接コード）
（参考ページの意味もこういうことかも…）

jQuery.noConflict()( function($) {
$(function() {
$(".lavaLamp").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
});

（他にjQueryを使うのなら、j$ = jQuery　も設定しておいてもいいかも）

補足

おかげさまでやっと動きました。。
本当に感謝です、ありがとうございます！

すみませんが、ここでNo1さんとNo2さんのお礼を一緒に書かせて頂きます。

そして一つ訂正が・・
以下の指定を私が間違えていたので直しました。。申し訳ありません。
結果的にいいますと、No1さん 6の回答、No2さん 2の回答 どちら動きました。。私がclass名を間違えてなければ・・；

変更前　$(".lavaLamp").lavaLamp({
変更後　$(".lavaLampNoImage").lavaLamp({

上の修正をした上で、
No1さん6の回答と、No2さん2の回答を反映させますと動きました。
以下、修正した部分です。

※文字制限の関係上、捕捉に書きました。

No1さん6の回答に変更-----------------------------------------

<script type="text/javascript">
jQuery.noConflict()( function($) {
var j$ = jQuery;
$(function() {
$(".lavaLampNoImage").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
});
</script>

No2さん2の回答に変更-----------------------------------------

<script type="text/javascript">
<!--
jQuery.noConflict();
var j$ = jQuery;
j$(function() {
j$(".lavaLampNoImage").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
-->
</script>

参考サイトの記述-----------------------------------

<script type="text/javascript">
jQuery.noConflict()(function($){
var j$ = jQuery;
</script>

↓参考に入れてみると・・これでは動きませんでした。

<script type="text/javascript">
jQuery.noConflict()(function($){
var j$ = jQuery;
$(function() {
$(".lavaLampNoImage").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
</script>

No1さんの6の回答と、参考サイトのをそのまま入れてみたのと比較しますと、
});
が必要だったようです。

協力いただいたNo1さんNo2さんありがとうございます。

-------------------------------------------------------------------------------------------------------

・$('startFx') is null
$('startFx').addEvent('click', function (e){

上記のエラーの問題ですが、解決しました。
今使用していたものが古かったようで、エラーが残ったままだったようです。
最新の「SlideIn」が見つかりまして、
↓ここのURLのjavascriptをもってきたら直りました。
http://www.chromasynthetic.com/blog/?p=78/78

var SlideIn = {
start: function () {
var delay = 200;
$$('img').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('load', SlideIn.start);

これで全てエラーなく、mootoolsとjqueryを共存させることができました。
ありがとうございました！

回答No.5

fujillin

#1です。

#2様と同じ認識でいたのですが、少し調べてみました。
質問者様のご提示の参考ＵＲＬの最後に確かにそのような記述はあるのですが、どうみても構文エラー。（構文エラーはちょっと置いておくとして…）
その後に、外部ファイルの読込みタグがあるのだが…

-----　ざっと調べて見た内容　-----
jQuery.noConflict()での戻り値はJQueryオブジェクトらしいので、
jQuery.noConflict();
var j$ = jQuery;
は、 var j$ = jQuery.noConflict(); の1行でもいけるらしい。

となると、
jQuery.noConflict()( function($) { …… });
は、　jQuery( callback );　ということになって、通常の
$(function() {　……　});　と同じことになる。

なので、
function($) { …… } (jQuery);
を実行しているのと同じようなことで、{ …… }内では$がjQueryのオブジェクトとして実行されるという寸法のようである。
もしも、ホントにこのようなことができるのなら、意味はわかるのだが…
（「…」が直書きのコードなら、それは当然そうなるはずなんだけど）

さて、実際は以下のようになっているので、
<script>
　jQuery.noConflict()( function($) {
</script>
<script type="text/javascript" src="xxx.js"></script>
<script>
　}); //←とりあえず、付け加えてみた。
</script>
みたいにして、外部スクリプトがそのまま匿名関数内に読込まれてくれるのだろうか？　そうなりゃわかるが、ホントかぁ？!

簡単な例で実験してみたけれど、そうは問屋がおろさない。（そりゃそーだろ） 外部ファイルは独立して読込まれているようだ。（グローバルにアクセスできる）
その前に、「 { 」と「 } 」 を分断して<script>タグに記載するところで、すでにエラーになっちゃうんだけど。（当たり前だ）
-------　以上　------

…ってちょっとひらめいた気もしたのだが、現実は素直に常識的だった。
ってーことは、参考のサイトに出ている「だいじょーぶ」というのはどーいうことなんだろうか？？

回答No.4

yyr446

No2です。
var j$ = jQuery;
ってやっているから、それ以降
jQueryの機能はj$()
で使わなければならないのでは？
私がまちがってるのですかねえ。

補足

再度回答いただきまして、本当にありがとうございます。
ちょっと長くなりますが、読んでいただけると助かります。

>jQueryの機能はj$()
>で使わなければならないのでは？
No.2さんは間違っていないと思います、私もそう思うのですが、、；
参考サイトにかかれている、「$がj$に全て書き換え(置換)しなくてもいい」ができたら便利だなぁ、と思いまして。。
しかし私では知識が浅いため、参考サイトのを入れてみても分からなかったので質問させていただきました。
引き続き調べていますが。。
通常はNo.2さんが書かれていらっしゃるとおり、
記述的にvar j$ = jQuery;となっているので、$をj$にしなければいけないかと思います。

No.2さんの方法も、実際コピー＆ペーストで入れて試してみたところ、$をj$にする箇所ですが、
実は読み込んでいる「jquery.lavalamp.js」の中にも$の箇所があったので、
すべて「j$」に置換しまして、上書きで入れてみたのですが、うまくいきませんでした、
以下のその箇所を貼りつけてみたのですが、、何か間違っていますでしょうか。。

「jquery.lavalamp.js」置換前---------------------------------------------------------------------------------

(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});

return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

$li.not(".back").hover(function() {
move(this);
}, noop);

$(this).hover(noop, function() {
move(curr);
});

$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});

setCurr(curr);

function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};

function move(el) {
$back.each(function() {
$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};

});
};
})(jQuery);

置換後----------------------------------------------------------------------------------

(function(j$) {
j$.fn.lavaLamp = function(o) {
o = j$.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});

return this.each(function() {
var me = j$(this), noop = function(){},
j$back = j$('<li class="back"><div class="left"></div></li>').appendTo(me),
j$li = j$("li", this), curr = j$("li.current", this)[0] || j$(j$li[0]).addClass("current")[0];

j$li.not(".back").hover(function() {
move(this);
}, noop);

j$(this).hover(noop, function() {
move(curr);
});

j$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});

setCurr(curr);

function setCurr(el) {
j$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};

function move(el) {
j$back.each(function() {
j$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};

});
};
})(jQuery);

回答No.3

yyr446

No2です先ほどの答えに1箇所書き違いがあります。
気づかれましたよね。
<script type="text/javascript">が一つ余分です

回答No.2

yyr446

おそらくこうですよ。
<!--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">
<!--
jQuery.noConflict();
var j$ = jQuery;
<script type="text/javascript">
j$(function() {
j$(".lavaLamp").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
-->
</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>

お礼

<script type="text/javascript">
<!--
jQuery.noConflict();
var j$ = jQuery;
<script type="text/javascript">
j$(function() {
j$(".lavaLamp").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
-->
</script>

書いてくださった上の部分をみて、少しわかった気がします。
共存記述を単体で書いていましたので。。一緒にするのですね。
それをふまえて、そこの箇所を変更してみました。

できましたら、もう少し教えて頂きたいのですが、
jQuery.noConflict();　←ここの記述を後々「j$」を使わなくてもいけるという、
jQuery.noConflict()(function($){　←というようにしたいのでそこだけ直したのですが、
それを入れて、j$を$となおしますと、
・$(".lavaLamp") is null
$(".lavaLamp").lavaLamp({
のエラーがなくなりました。

しかし、やはり共存部分の記述の仕方がおかしい？のか、
・missing } after function body
-->
と出ます。
おそらくどこかにとじるタグ 　}　を入れるのかと思いますが、どこに入れればいいのか分かりません。。

なお、以下のエラーは、まだ出たままです。。
・$('startFx') is null
$('startFx').addEvent('click', function (e){

どうやらもってきたサイトでもエラーはでるようなので、最初からのようですが；

javasctipt部分　(参考に変更しました)--------------------------------------------------------------------------------------------

<!--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">
<!--
jQuery.noConflict()(function($){
var j$ = jQuery;
$(function() {
$(".lavaLamp").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
-->
</script>

<!--mootools-->　ここは同様なので省略します；文字制限で入りませんので・・

回答No.1

fujillin

質問文からでは、実際にどのような形で実装されているのか不明ですが…

jQueryもmootoolsもほとんど知らないけれど、…
とりあえず
＞<script type="text/javascript">
＞jQuery.noConflict()(function($){
＞var j$ = jQuery;
＞</script>
の部分はそのまま

＞・missing } after function body
＞var j$ = jQuery;
の文法エラーだし、そもそも参考になさっているサイトの記述方とも違うけど、どうしたかったのでしょうか？

jQuery.noConflict();
を実行すると、それ以降はjqueryでは$は機能しなくなるので、jqueryのライブラリを使用しているのなら、そちらも修正しないとエラーになる可能性が高い。
＞・$(".lavaLamp") is null
などはそのあたりでは？

お礼

>jQuery.noConflict();
>を実行すると、それ以降はjqueryでは$は機能しなくなるので、jqueryのライブラリを使用しているのなら、そちらも修正しないとエラーになる可能性が高い。
＞・$(".lavaLamp") is null
>などはそのあたりでは？

下記の記述だと、&をj$に修正しなくてもよいと書かれてありましたので、$をj$などに変更をしてなくてもできるはずなのですが。。
<script type="text/javascript">
jQuery.noConflict()(function($){
var j$ = jQuery;
</script>

＞・missing } after function body
＞var j$ = jQuery;
＞の文法エラーだし、そもそも参考になさっているサイトの記述方とも違うけど、どうしたかったのでしょうか？

記述方法は、２つのサイトを参考にしています。
・$をj$などに変更せずによいの記述方法をとり、(下記サイトの共存記述方法)
・jQueryとprototype.jsを共存させる方法
ttp://​www.css-lecture.com/log/javascript/029.html​

それをどこに入れるかは、以下のもう一つのサイトを参考にしました。
・jQuery⇒mootoolsの共存
ttp://h2ham.seesaa.net/article/106053238.html

お二人の回答を参考にさせていただいたところ、
どうも私の共存方法の入れ方が悪いように思いました。。
それかエラーで出るとじるタグ }？がどこかに必要なのかもしれません。
それから色々いれていますが、まだ同時にはうごきません；