/
/
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:
➥Pretty sweet right? This example allows you to keep this box open as you move your mouse over it. You can even put a link or an image in here if you'd like!
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(); }; });
Recent Posts
Mudd Advertising
Let’s leverage!
Mudd Advertising
Politics Schmolitics!
Mudd Advertising
Mudd has been promoted to Google Premier Partner
All Categories
Tags
anonymous website visitor identification
automotive
branding
cable
case study
chevrolet
chevy
data
digital marketing
direct marketing
display
dynamic inventory display
facebook
first party
google
google analytics
google premier partner
internet marketing
local seo
Matthew Moody
media
mobile search
mobile seo
MUDDid
online marketing
online video
organic
organic search
pay per click
political
ppc
promotion
retargeting
search engine marketing
search engine optimization
sem
seo
social advertising
social media
social media marketing
strategy
traditional marketing
traditional media
Volunteer Spotlight
youtube