jQuery as a plugin for MooTools, or visa versa, not sure!

With MooTools `Class` and `Native` modules + jQuery, you can write object oriented plugins with MooTools and write all the DOM manipulation and effects in jQuery. This uses SlideShow, a script with lots of DOM manipulations.

HTML

<script src="http://ryanflorence.com/jsfiddle/mootools-jquery/mootools-jquery-slideshow.js"></script>
<h1>Slideshow Demo</h1>
<div id="slides">
    <div class="red transition:crossFade duration:1000">1</div>
    <div class="green transition:blindUp">2</div>
    <div class="blue transition:pushLeft duration:1000">3</div>
    <div class="red transition:fadeThroughBackground duration:1000">4</div>
    <div class="green transition:blindLeftFade duration:2000">5</div>
    <div class="blue transition:blindRightFade duration:500">6</div>
</div>
<h2>Events</h2>
<p>
    <span id="onShow">show</span>
    <span id="onShowComplete">showComplete</span>
    <span id="onPlay">play</span>
    <span id="onPause">pause</span>
    <span id="onReverse">reverse</span>
</p>
<h2>Methods</h2>
<p>
    <button id="pause">pause</button>
    <button id="play" disabled="disabled">play</button> 
    <button id="reverse">reverse</button> &nbsp; 
    <button id="showNext" disabled="disabled">showNext</button>
    <button id="showPrevious" disabled="disabled">showPrevious</button>
    <button id="show" disabled="disabled">show slide 5</button>
    <button id="showIndex" disabled="disabled">show slide 1</button> &nbsp;
</p>

<h2>Conventional jQuery Instantiated Instance</h2>
<ol id="ticker">
    <li>Lorem ipsum dolor sit amet, consectetur</li>
    <li>adipisicing elit, sed do eiusmod tempor</li> 
    <li>incididunt ut labore et dolore magna aliqua.</li> 
    <li>Ut enim ad minim veniam, quis nostrud</li>
    <li>exercitation ullamco laboris nisi ut aliquip</li>
    <li>ex ea commodo consequat. Duis aute irure</li>
</ol>

CSS

div#slides {
    width: 500px;
    height: 280px;
    overflow: hidden;
    border: solid 2px #000;
}

div#slides div {
    height: 280px;
    width: 500px;
    font-size: 100px;
    line-height: 200px;
    text-align: center;
    color: #fff;
}

ol#ticker {
    height: 1.4em;
    overflow: hidden;
    border: solid 1px #aaa;
    background: #ccc;
}

ul#ticker li {
    padding: 0.2em 0;
}
/* @end */

/* @group global */

body {
    font-family: Helvetica, arial;
    background: #fff;
}

h1 {
    color: #0094d5;
}

h2 {
    color: #43aa38;
}

a {
    color: #0094d5;
}

a:visited, a:hover {
    color: #00577e;
}

.red {
    background: #e40053;
}

.blue {
    background: #0094d5;
}

.green {
    background: #43aa38;
}

h2 {
    margin-top: 20px;
}

JavaScript

if($('designer') && $('coder')){            
        $('designer').addEvent('mouseenter', showDesigner);
        $('designer').addEvent('mouseleave', hideDesigner);
        $('coder').addEvent('mouseenter', showCoder);
        $('coder').addEvent('mouseleave', hideCoder);
    }