jQuery slideDown of div overlay on image slideUp immediately

jquery jquery-ui jquery-slide-effects
James Callaghan picture James Callaghan · Jul 6, 2011 · Viewed 9.9k times · Source

I'm trying to create an overlay on a image that slides in and out when hovering over the image. Same reason as this question - JQuery Text slideDown / slideUp Overlay on Image Keeps Bouncing?.

I have placed my code in jsFiddle so it is accesible - http://jsfiddle.net/jamescallaghan/hg9r7/

Any help would be much appreciated.

Answer

Anthony Mineo picture Anthony Mineo · Jul 6, 2011

I think the issue you were having was that the hover was based off the image element and not the .slide so when that text panel slid upwards it covered the image and when you moved the mouse it acted as a hover/unhover.

Please take a look at this, i just updated your code a bit. should work with multiple slides :) Hope this helps!

http://jsfiddle.net/NuWna/2/

All the best, Anthony

Related questions

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from jQuery UI as the stand alone picker. I have this code: <div id="datepicker"></div> And the following JS: $('#datepicker').datepicker(); When I try to return the value …

Read More
Find out whether radio button is checked with JQuery?

I can set a radio button to checked fine, but what I want to do is setup a sort of 'listener' that activates when a certain radio button is checked. Take, for example the following code: $("#element").click(function() { $('#…

Read More
check / uncheck checkbox using jquery?

I have some input text fields in my page and am displaying their values using JavaScript. I am using .set("value","") function to edit the value, add an extra checkbox field, and to pass a value. Here I want to …

Read More