jquery <li> hover effect working on jsfiddle but not test site
<p>i am working on a jquery <code>&lt;li&gt;</code> hover effect and it is working on jsfiddle but not on the test site ie the 'hidden' div is not being displayed on hover.</p>

<p><a href="http://jsfiddle.net/rwone/p4xXH/" rel="nofollow">http://jsfiddle.net/rwone/p4xXH/</a></p>

<p>both have the same resources, html and css and the only difference is that i have added opening and closing <code>&lt;script&gt;</code> tags around the js in the head area of the test site.  </p>

<p>there are no errors in firebug.</p>

<p>is it ok to use all the js code from jsfiddle and just wrap <code>&lt;script&gt;</code> tags around it, or does this cause some syntax errors that could be preventing the hover effect from working?</p>

<p>here is the code i am using on the test site (no link available).  </p>

<pre><code>&lt;script&gt;
// begin hover functionality
$(".magic li").each(function() {

var hiddenDiv = $(this).find(".card"),
parentElement = $(this),
api = {};

api.isOpen = false;

api.timeout = null;

api.position = function(){
hiddenDiv.css({
"top": parentElement.offset().top - $("#non_scrollable_area").offset().top - 106,
"left": parentElement.offset().left - $("#non_scrollable_area").offset().left - 94 
});
}

api.resetTimeout = function(){

clearTimeout( api.timeout );
}

api.startShowing = function(){

api.resetTimeout();

api.timeout = setTimeout(function(){
api.show();        
},200);
}

api.startHiding = function(){

api.resetTimeout();

api.timeout = setTimeout(function(){
api.hide();        
},150);
}
api.show= function(){

if(!api.isOpen){

api.position();

hiddenDiv .fadeIn(300);

api.isOpen = true;

// $("#isotope_container").bind("scroll.hiddendiv",api.position);

}
}

api.hide = function(){

if( api.isOpen ) {
api.isOpen = false;
// $("#isotope_container").unbind("scroll.hiddendiv");     
hiddenDiv.fadeOut(100);
}

}

hiddenDiv.bind("mouseenter", function() {

api.resetTimeout();

}).bind("mouseleave", function() {

api.startHiding();

}).css("z-index", 100).appendTo("#non_scrollable_area"); 

$(this).data("hiddenApi",api );

}).bind("mouseenter", function() {

var api = $(this).data("hiddenApi");

api.startShowing();

}).bind("mouseleave", function() { // start closing timeout once mouse leaves isotope element

var api = $(this).data("hiddenApi");

api.startHiding();

});

// begin custom scrollbar
(function($){
$(document).ready(function(){
$(".holder_a, .holder_b, .holder_c, .holder_d").mCustomScrollbar({
set_width:false, 
set_height:false, 
horizontalScroll:true, 
scrollInertia:550, 
scrollEasing:"easeOutCirc", 
mouseWheel:"auto", 
autoDraggerLength:true, 
scrollButtons:{ 
enable:false, 
scrollType:"continuous", 
scrollSpeed:20, 
scrollAmount:40 
},
advanced:{
updateOnBrowserResize:true, 
updateOnContentResize:false, 
autoExpandHorizontalScroll:false, 
autoScrollOnFocus:true 
},
callbacks:{
onScrollStart:function(){}, 
onScroll:function(){}, 
onTotalScroll:function(){}, 
onTotalScrollBack:function(){}, 
onTotalScrollOffset:0, 
whileScrolling:false, 
whileScrollingInterval:30 
}
});
});
})(jQuery);
&lt;/script&gt;
</code></pre>
