CODEWITHSUNDEEP
jquerycss
Matt Hintzke
Matt Hintzke

Reputation: 8004

Dealing with DOM elements I want invisible to user

I have a footer that I want to be invisible to the user until they scroll to the bottom of my page. I am trying to do it all with CSS and just using JS to apply classes that will perform CSS transitions, but the problem is the footer has some anchors <a></a> in it and so my original method of just using opacity allows the user to still hover over the link and click before I want them to.

This led me to add the jQuery $('.footer').hide() and $('.footer').show() in place so that the DOM only appears when I want it to. However, doing this seems to have broken the CSS transition that was supposed to take place (now instead of an animation from 0 opacity to 0.8, it goes instantly).

Is there a solution anyone knows of that would allow me to hide the DOM completely but let me use CSS transitions on it as soon as it becomes available via $.show()?

This can be seen at DaemonDeveloper.com

Just navigate down to the "Why" section and observe.. The first CSS transition is broken, but the second that reveals the buttons works ok.

Upvotes: 1

Views: 98

Answers (2)

Nick Tomlin
Nick Tomlin

Reputation: 29251

Unfortunately, you cannot transition an element that has been hidden with display: none (which is what jQuery's hide() is doing.

The best way around this is to hide the item with visibility: hidden and declare a height of zero. This way you can still apply the transition to opacity to get the effect you want by just manipulating classes.

CSS

.hide {
  visibility: hidden;
  height:0;
  opacity:0;
  transition: opacity .2s ease;
}

.show {
  visibility:visible;
  height:auto;
  opacity:1;
}

Upvotes: 2

Rob W
Rob W

Reputation: 9142

jQuery offers methods such as fadeIn and fadeOut. There's also the animate method.

Upvotes: 0

Related Questions