jQuery(function(){ jQuery("dd:not(all)").css("display","none"); jQuery("dl dt").click(function(){ if(jQuery("+dd",this).css("display")=="none"){ jQuery("dd").slideUp("slow"); jQuery("+dd",this).slideDown("slow"); } }); }) jQuery(function () { jQuery('.date_has_event').each(function () { // options var distance = 10; var time = 250; var hideDelay = 500; var hideDelayTimer = null; // tracker var beingShown = false; var shown = false; var trigger = jQuery(this); var popup = jQuery('.events ul', this).css('opacity', 0); // set the mouseover and mouseout on both element jQuery([trigger.get(0), popup.get(0)]).mouseover(function () { // stops the hide event if we move from the trigger to the popup element if (hideDelayTimer) clearTimeout(hideDelayTimer); // don't trigger the animation again if we're being shown, or already visible if (beingShown || shown) { return; } else { beingShown = true; // reset position of popup box popup.css({ bottom: 20, left: -76, display: 'block' // brings the popup back in to view }) // (we're using chaining on the popup) now animate it's opacity and position .animate({ bottom: '+=' + distance + 'px', opacity: 1 }, time, 'swing', function() { // once the animation is complete, set the tracker variables beingShown = false; shown = true; }); } }).mouseout(function () { // reset the timer if we get fired again - avoids double animations if (hideDelayTimer) clearTimeout(hideDelayTimer); // store the timer so that it can be cleared in the mouseover if required hideDelayTimer = setTimeout(function () { hideDelayTimer = null; popup.animate({ bottom: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { // once the animate is complete, set the tracker variables shown = false; // hide the popup entirely after the effect (opacity alone doesn't do the job) popup.css('display', 'none'); }); }, hideDelay); }); }); });