How to Get the jQuery Image Hover Effect

As a cross-platform JavaScript library, jQuery is designed to simplify the client-side scripting of HTML. The key word here is, “simplify”. For the most part, jQuery requires less coding to execute more functions and is the most popular JavaScript library in use today. It is free, open source software that allows developers to create powerful, dynamic web pages and applications, and in this post I’ll walk through the jQuery image hover effect that I think works best when implementing a .slideDown() function upon hovering. First, you must have something that you are going to hover over that will fire the function of the .slideDown() event. Give this element an ID (in this case I'm using a div with a background image so I can easily add another cool effect.) Then create your hidden drop down section and begin to add any CSS you'd like. I like to do this in Google Chrome's Inspect Element tool after I've added the initial HTML structure. In the example below, you will notice a few things happening. First of all you will want to set the positioning of the slideDown menu to absolute and bring the z-index up to about 1000. That way when your box opens up, it won't push everything else on the page down and will stay on the top layer. If you're using a background image like I did in order to alter the image upon hovering, make sure you load the image when the page loads by adding an inline style to your hover image of "display:none;". This way you can avoid the "flicker" of the image when you mouse over it.

jQuery Image Hover:

➥

HTML

<div id="wlWrapper">
<div id="element-you-are-hovering-over"></div>
<div id="hidden-element-that-will-slide-down">
  <p>Pretty sweet right? This example allows you to keep this box open as you move your mouse over it. You can even put a <a href="#">link</a> or an image in here if you'd like!<img src="http://www.yourimagedirectory.com/image" style="clear:both;padding-top:10px;width:100%;"/></p>
</div>
<img src="http://www.yourimagedirectory.com/image_color" style="display:none;"/>
</div>

CSS

#element-you-are-hovering-over {
  background: #e6e6e6 url(http://www.yourimagedirectory.com/image_b&w);
  height: 119px;
  width: 313px;
  padding: 10px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
#element-you-are-hovering-over:hover {
  background: #e6e6e6 url(http://www.yourimagedirectory.com/image_color);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
#hidden-element-that-will-slide-down {
  display: none;
  position: absolute;
  z-index: 9999;
  width: inherit;
  padding: 10px;
  color: #333;
  background: #DDD;
  border-bottom: 1px solid #777;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
#wlWrapper {
  width: 313px;
  margin: 20px auto 0 auto;
}

jQuery

$(document).ready(function () {
    var menu = $('#hidden-element-that-will-slide-down')
    var timeout = 0;
    var hovering = false;
    // Start with the drop down section hidden
    menu.hide();
    $('#element-you-are-hovering-over')
        .on("mouseenter", function () {
        hovering = true;
        // Open the drop down section
        $('#hidden-element-that-will-slide-down')
            .stop(true, true)
            .slideDown('250','easeInQuad');
        if (timeout > 0) {
            clearTimeout(timeout);
        }
    })
        .on("mouseleave", function () {
        resetHover();
    });
    $("#hidden-element-that-will-slide-down")
        .on("mouseenter", function () {
        // reset flag
        hovering = true;
        // reset timeout
        startTimeout();
    })
        .on("mouseleave", function () {
        // The timeout is needed in case you go back to the image
        resetHover();
    });
    function startTimeout() {
        // This gives you .2 seconds to get your mouse to the drop down section
        timeout = setTimeout(function () {
            closeMenu();
        }, 200);
    };
    function closeMenu() {
        // Only close if not hovering & close at a rate of .25 seconds
        if (!hovering) {
            $('#hidden-element-that-will-slide-down').stop(true, true).slideUp(250);
        }
    };
    function resetHover() {
        // Allow the section to close if the flag isn't set by another event
        hovering = false;
        // Set the timeout
        startTimeout();
    };
});