jQuery: How to hide an element and then reveal another?

Question

I am pretty new with jQuery and I am trying to achieve a simple interaction.

Scenario I have a circle and a square on my page. The square is hidden (display:none) by default. When I hover my mouse on the circle, it will reveal a link in it. When you click on it, the circle will fade away and the square will fade in.

Problem The circle fades away and the square fades in but the square gets hidden after it fades in. The display:block property doesn't seem to work?

Code http://codepen.io/vennsoh/pen/urFid

I have edited the code, it works now.

$(function(){ $("#click").on("click", function(){ $(".circle").addClass("fade-out"); $(".square").addClass("fade-in"); }); });

Thanks for the replies. It seems like a simple task but it is mind boggling for many people. Anyway I have figured it out. In your @keyframe fade-in, just add 0% { opacity: 0 } and you are done. — Vennsoh
– Vennsoh, Commented Dec 12, 2013 at 7:44

Praveen · Accepted Answer · 2013-12-12 06:32:34Z

1

Actually your code works but opacity of square is still 0 even after it is displayed.

2options:
1) remove opacity in square

.square{ width: 100px; height: 100px; background-color: green; position: absolute; display: none; }

2) or add opacity in fade-in

.fade-in{ display: block; opacity: 1; animation: fade-in .5s ease-in-out 1; }

answered Dec 12, 2013 at 6:32

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vennsoh Over a year ago

1) Remove opacity in square will not get the fade in effect I want. Green will just suddenly show. Animation needs to start from somewhere, in this case 0 --> 1. 2) opacity: 1 will not work, it will just get applied to the square immediately. No fade in effect

Vennsoh Over a year ago

Yeap, I was the one who did the code. Thanks to your comment "Actually your code works but opacity of square is still 0 even after it is displayed." I was like ohhh! of course! So I figured that out (: Thanks.

Spokey · Accepted Answer · 2013-12-12 06:31:31Z

0

Remove the opacity 0 from .square

answered Dec 12, 2013 at 6:31

Spokey

11k2 gold badges31 silver badges44 bronze badges

1 Comment

Vennsoh Over a year ago

I need the opacity. The animation has to start from opacity 0 to 1 to achieve the fadeIn effect.

Ajith S · Accepted Answer · 2013-12-12 06:43:18Z

0

Here is the working fiddle

CSS

fade-out{ display:none; animation: fade-out .5s ease-in-out 1; } .fade-in{ display: block; opacity:1; animation: fade-in .5s ease-in-out 1; }

answered Dec 12, 2013 at 6:43

Ajith S

2,9172 gold badges20 silver badges30 bronze badges

1 Comment

Vennsoh Over a year ago

there is no "fade in" effect. when the element gets apply .fade-in, it gets opacity 1 straight away.

yMed · Accepted Answer · 2013-12-12 06:48:36Z

0

$("#click").on("click",function(){ $(".circle").fadeOut(200,function(){ $(".square").fadeIn(500); }); });

example : http://jsfiddle.net/dSR9s/

answered Dec 12, 2013 at 6:48

yMed

654 bronze badges

2 Comments

Vennsoh Over a year ago

Thanks. But I am looking at only using CSS for visual effects. Not relying on jQuery on fading elements.

Vennsoh Over a year ago

Thanks yMed, but maybe try taking a look at my new updated code. codepen.io/vennsoh/pen/urFid I am thinking it is alot more elegant. (:

Vennsoh · Accepted Answer · 2013-12-12 07:45:10Z

This is the solution that I just figured out. The problem is in the @keyframe fade-in.

http://codepen.io/vennsoh/pen/urFid

Collectives™ on Stack Overflow

jQuery: How to hide an element and then reveal another?

5 Answers 5

2 Comments

1 Comment

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

1 Comment

2 Comments

Comments

Related