Sliding down, Scriptaculous and jQuery

Haven't been hacking JavaScript "seriously" after a few years, I got myself back into doing it two days ago. I wanted a slide up/down effect on a panel when a button is hovered.

I first came across the Scriptaculous but I wasn't satisfied with the size of the JS files, Scriptaculous+Prototype+jQuery, as I use Thickbox as well (too bad, Lightview is not free).

I received some questions in Twitter and Facebook about "why both?", so I knew I needed a change unless I had a good reason. I then spent a bit of time in the morning to read the jQuery's documentation and found out that it's easier to get this done with it.

Here's the code comparison:

jQuery's Snip

jQuery(document).ready(function(){
jQuery("#woPageSelector").hover( function(){ jQuery("#woPageSelectorContent").slideDown(300); }, function(){ jQuery("#woPageSelectorContent").slideUp(300); } );
});

Scriptaculous' Snip

var mouseOverHandler = function(event) {
$('wpPageSelectorContent').slideDown({duration: 0.5, queue: {position: 'end', scope: 'pageSelectorsPanel', limit: 2}});
$('woPageSelector').stopObserving('mouseover', mouseOverHandler);
document.observe('mouseover', mouseOutHandler);

}

var mouseOutHandler = function(event) {
$('wpPageSelectorContent').slideUp({duration: 0.5, queue: {position: 'end', scope: 'pageSelectorsPanel', limit: 2}});
$('wpPageSelector').observe('mouseover', mouseOverHandler);
document.stopObserving('mouseover', mouseOutHandler);
}

$('wpPageSelector').observe('mouseover', mouseOverHandler);

By the way, if you really have to use Prototype and jQuery at the same time, you may want to read this page to prevent conflicts.

- yc, woohoo!