mootoolsとjQueryの共存がうまくいかない。

質問

mootoolsとjQueryの共存がうまくいかない。

▼共存参考サイト
http://h2ham.seesaa.net/article/106053238.html

参考サイトを見て、共存したいのですが、Operaでうまくいきません。
IE、fox、safari、chromeではうまくいくのですが・・・

$をj$などに変えてみたりいろいろ試しましたがうまくいきませんでした。
お力添えよろしくお願いします。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/yuga.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="../js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="../js/coda-slider.1.1.1.pack.js"></script>

<script type="text/javascript">

var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;

theInterval = function(cur){
clearInterval(theInt);

if( typeof cur != 'undefined' )
curclicked = cur;

$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');

theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 5 == curclicked )
curclicked = 0;

}, 15000);
};

$(function(){

$("#main-photo-slider").codaSlider();

$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");

$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});

theInterval();
});
</script>

<script type="text/javascript">
<!--
jQuery.noConflict();
var j$ = jQuery;
-->
</script>
<script src="../js/mootools.js" type="text/javascript"></script>
<script src="../js/menu.js" type="text/javascript"></script>
<script src="../js/main.js" type="text/javascript"></script>

回答No.1

fujillin · ベストアンサー

参考にされているサイトの記述内容の繰り返しになってしまいますが、

＞jQuery.noConflict();
＞var j$ = jQuery;
まず、上記でコンフリクトを避けている方法の意味（処理内容）を理解する必要があります。
簡単に書けば、$をjqueryの関数からはずして（他のライブラリのために開放して）、jquery用には新しくj$（それ以外でもかまいませんが）を定義し直すことでコンフリクトを避けようとしています。
あるいは、新しく定義し直さない方法として
　(function($) {
　　// $関数を用いたjQuery用のコード
　})(jQuery);
みたいな方法もあります。

なので、それ以降に実行されるスクリプトではj$を使用していなければ正しく処理をされません。
setIntervalで実行される内容やイベント処理などのように、mootoolsを読込んだ後に実行される内容がこれに当たります。
処理が実行されるタイミングと、その時に示す$の内容が意図通りになっているかを確認してください。

ご提示のコードの書き方だと、このあたりを理解されていないように想像されます。
単なるおまじないとしてコードを書くのではなく、まずは、noConflictの意味合いを理解してください。
＜参考サイトと同様のサイト＞
　http://blog.hayazo.com/?p=57
　http://stacktrace.jp/jquery/with_other_lib.html
　http://allabout.co.jp/gm/gc/24167/3/
＜jquery　documentation＞
　http://api.jquery.com/jQuery.noConflict/
＜日本語リファレンス＞
　http://semooh.jp/jquery/api/core/jQuery.noConflict/_/

また、サブのライブラリを利用しているようですが、それらがnoConflict()を考慮して作成されているとは限りませんのでそちらにも注意が必要です。
　http://d.hatena.ne.jp/masahi6/20071129/1196355971

別法として、mootools側でコンフリクトを避ける方法として「Dollar Safe Mode」というのが用意されているようなので、この方法を用いるというのもありそうです。
jqueryの場合と方法的には同じなので、mootools利用のサブのライブラリがどのような対応をしているか不明ですので、そちらも調べて対処しなければならないのは同様です。
　http://sharedhat.com/blog/943/
　http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/

おまけ　（単なる記法についての記事ですが）
　http://0-9.sakura.ne.jp/blog/archives/2008/02/05232624.html
　http://0-9.sakura.ne.jp/blog/archives/2008/05/09083522.html

お礼

ありがとうございます！
j$に定義し直したり、いろいろやりましたがやはり、Operaではうまく動きませんね・・・
サブのライブラリがnoConflict()を考慮して作成されてないのでしょうか・・・。
もう少し考えて、ダメでしたら違う方法を考えてみます。