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.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>タグに記載するところで、すでにエラーになっちゃうんだけど。（当たり前だ）
-------　以上　------

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