Edit in JSFiddle

YUI({
    modules: {
        'jquery': {
            fullpath: 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js',
            condition: 'before' // Load jQuery before its plugins
        },
        'jCarousel': {
            fullpath: 'http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js',
            requires: ['jquery', 'jCarouselCSS']
        },
        'jCarouselCSS': {
            fullpath: 'http://sorgalla.com/projects/jcarousel/skins/tango/skin.css',
            requires: ['jCarouselCSS'],
            type: "css"
        }
    }
}).use('transition', 'jCarousel', 'calendar', function(Y) {

    $('#mycarousel').jcarousel();

    $("#animtoggle").click(function(){
      $("#cssfade").toggleClass('fade');
        
        $("#jfade").fadeToggle();

        if (Y.one("#yfade").getStyle("display") === "none") {
            Y.one("#yfade").show(true);
        }
        else {
            Y.one("#yfade").hide(true);
        }
    
    });
    
    new Y.Calendar({
      contentBox: "#mycalendar",
      width:'330px',
    }).render();
    
});

<h1>Examples of jQuery inside of YUI3</h1>

<h2>Animation</h2>
<div>
    <button id="animtoggle"> >>>> Click me <<<<< </button>
    <p id="yfade">Fades using YUI</p>
    <p id="jfade">Fades using jQuery</p>
    <p id="cssfade">Fades using CSS3 Animations</p>
</div>

        
<hr />


<h2>jQuery Plugin: jCarousel</h2>
<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
        
        

<hr />


<h2>YUI3 Widget: Calendar</h2>
<div id="demo" class="yui3-skin-sam yui3-g">
  <div id="leftcolumn" class="yui3-u">
     <div id="mycalendar"></div>
  </div>
</div>

h1{
    text-align:center;
    font-size:200%;
    font-weight:bold;
    text-decoration:underline;
}

h2{
    font-size:150%;
    font-weight:bold;
}

hr{
    margin:20px;
}

#jfade, #yfade, #cssfade{
    background-color:pink;
}

#cssfade.fade {
    color:white;
    background-color:white;
    -moz-transition: all 0.5s linear;  /* FF4+ */
}

#cssfade{
    -moz-transition: all 0.5s linear;  /* FF4+ */
}