Ashley Brown Ashley Brown - 1 year ago 65
CSS Question

How can I stop this jQuery from bugging out?

So I'm trying to create a box that has two layers: The front layer and the back layer. They're going to be stacked on top of each other so the back layer is hidden by default.

When you hover over the top of the box (front layer technically), then the front layer is supposed to slide up revealing the back layer. I tried to do this by using

but it kept bugging out revealing both layers at the same time. So then I switched to just
but that didn't seem to help too much.


As you can see, it sometimes shows both divs when it's not supposed to and it also slides multiple times randomly. How could I make this more efficient?

Here is a JsFiddle


Questions seeking debugging help ("why isn't this code working?") must
include the desired behavior, a specific problem or error and the
shortest code necessary to reproduce it in the question itself.
Questions without a clear problem statement are not useful to other

That is the reason people are voting to close this answer... What does this question not have, from that list?

Desired behavior? - Check
Specific problem? - Check
Shortest code necessary? - Check
Clear problem? - check

Answer Source

You don't really need to use slideUp and slideDown, you can achieve the slide effect by using the transform and transition CSS3 properties.

Updated JS fiddle:


$('.outer').hover(function() {
}, function() {


.outer {
  position: relative;

  .back {
    text-align: center;
    width: 100%;
  .back {
    display: block;
  .front {
    position: absolute;
    transition: 0.5s ease;
  .front-up {
    transform: translateY(-100%);

If you have to support older browsers, make sure to add the vendor prefixes to the transition and tranform rules (-webkit-, -moz-, etc.).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download