Ashley Brown Ashley Brown - 2 months ago 11
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

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

bugging

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

UPDATE:


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
readers.


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

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: https://jsfiddle.net/9uw2q24h/3/

Javascript:

$('.outer').hover(function() {
  $(this).children('.front').addClass('front-up');
}, function() {
  $(this).children('.front').removeClass('front-up');
});

CSS:

.outer {
  position: relative;

  .front,
  .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.).