$(document).ready(function() { // find the div.fade elements and hook the hover event $('.products').hover(function() { // on hovering over find the element we want to fade *up* var fade = $('> .products_hv', this); // if the element is currently being animated (to fadeOut)... if (fade.is(':animated')) { // ...stop the current animation, and fade it to 1 from current position fade.stop().fadeTo(500, 1); } else { fade.fadeIn(500); } }, function () { var fade = $('> .products_hv', this); if (fade.is(':animated')) { fade.stop().fadeTo(500, 0); } else { fade.fadeOut(500); } }); // get rid of the text $('.products > .products_hv').empty(); }); $(document).ready(function() { // find the div.fade elements and hook the hover event $('.announcements').hover(function() { // on hovering over find the element we want to fade *up* var fade = $('> .announcements_hv', this); // if the element is currently being animated (to fadeOut)... if (fade.is(':animated')) { // ...stop the current animation, and fade it to 1 from current position fade.stop().fadeTo(500, 1); } else { fade.fadeIn(500); } }, function () { var fade = $('> .announcements_hv', this); if (fade.is(':animated')) { fade.stop().fadeTo(500, 0); } else { fade.fadeOut(500); } }); // get rid of the text $('.announcements > .announcements_hv').empty(); }); $(document).ready(function() { // find the div.fade elements and hook the hover event $('.more-link').hover(function() { // on hovering over find the element we want to fade *up* var fade = $('> .more-link_hv', this); // if the element is currently being animated (to fadeOut)... if (fade.is(':animated')) { // ...stop the current animation, and fade it to 1 from current position fade.stop().fadeTo(500, 1); } else { fade.fadeIn(500); } }, function () { var fade = $('> .more-link_hv', this); if (fade.is(':animated')) { fade.stop().fadeTo(500, 0); } else { fade.fadeOut(500); } }); // get rid of the text $('.more-link > .more-link_hv').empty(); });