Search jQuery

jQuery Forum

Fade out Div then add display none with fade in delay

in Getting Started • 5 years ago

Hi all - I'm having a small issue which i need help with.

I have a div which has been overlayed over a set of gallery images called ".mask1". When someone hovers over this div i need it to fade out and display none added so i can use the gallery. When the mouse is moved off the gallery i need the div to fade back in after say 2 seconds.

i've tried animating opacity with css but obviously the div is still their over the top so the gallery isn't clickable, i've also tried adding a class but the animation is just repeat over again making the div flicker like a strobe.

If anyone could help me i would really appreciate it.

Many thanks

Replies(13)

Sµßhrånil∂

Re: Fade out Div then add display none with fade in delay

5 years ago

opacity will not work as even if you set the opacity to 0 still div presents there on top of your gallery.

Use fadeIn() | jQuery API Documentation and fadeOut() | jQuery API Documentation

Use fadeOut while move mouse enter on the overlay
Use fadeIn when mouse leave your gallery.

richard1

Re: Fade out Div then add display none with fade in delay

5 years ago

Whats the best way to write this - sorry i only have limited knowledge of jquery. This is what i have so far although there is no delay on mouseout and if you hover over the div loads of time the animation loops.

$( ".mask1" ).hover(function() {
$( ".mask1" ).fadeOut( "slow", function() {
});
});
$( ".homepage-gallery ul" ).mouseout(function() {
$( ".mask1" ).fadeIn( "slow", function() {
});
});

Any help appreciated.

Sµßhrånil∂

Re: Fade out Div then add display none with fade in delay

5 years ago

Your code is working or not?

Share a link to your page or create a demo on jsfiddle.net or plnkr.co

watusiware

Re: Fade out Div then add display none with fade in delay

5 years ago

You can use CSS3 transitions to do it. There are many tutorials on this. Here's one:

http://rapiddg.com/blog/fading-elements-css3-without-blocking-click-events

The performance will be much nicer than using the clunky old jQuery animation JS.

richard1

Re: Fade out Div then add display none with fade in delay

5 years ago

Sorry, my jsfiddle is here https://jsfiddle.net/8jg09pdx/

It doesn't seem to work very well at the moment.

@watusiware: very true although whats the backwards compatibility with this method?

watusiware

Re: Fade out Div then add display none with fade in delay

5 years ago

You lose IE 8 and 9 and Opera Mini. Do you care?

http://caniuse.com/#search=transition

The web is full of CSS3 transitions and animations. Basically every big site you visit.

If they are big enough, they will have some kind of experience for the dinosaurs as well.

richard1

Re: Fade out Div then add display none with fade in delay

5 years ago

No i dont care much - but the client does unfortunately.

watusiware

Re: Fade out Div then add display none with fade in delay

5 years ago

Are you making a site for desktop only?

This kind of stuff gets a lot more complicated if you need to support mobile as well. "hover" is a dicey concept on touchscreens.

You should use a plugin for dealing with it if so.

richard1

Re: Fade out Div then add display none with fade in delay

5 years ago

Yes its desktop only so no worries there

richard1

Re: Fade out Div then add display none with fade in delay

5 years ago

Hi Guys,

So i had a play with this again last night and go it working https://jsfiddle.net/8jg09pdx/1/

The only thing now is if i quickly move off the gallery div and back onto the gallery the div fades back in quickly and disappears and then obviously if this is done multiple times i get animation loop.

Can anyone help me?