0

In the code below, I have a span that is shown on mouseover of the nav element.

I'd like to animate this but do not know how.

I'd like to slide in and out the content in the span.

$(() => {
  $('nav').hover(() => {
    $('nav').addClass('open')
  }, () => {
   $('nav').removeClass('open')
  })
})
main {
  height: 100%;
  display: flex;
  flex: 1 1;
}

aside {
  border-right: 2px solid #f0f0f0;
  padding-top: 16px !important;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

nav {
  width: 100%;
}

ul {
  display: flex;
  flex-direction: column;
}

span {
  display: inline-block;
}

span+span {
  display: none;
}

nav.open span+span {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>

  <head></head>

  <body>
    <main>
      <aside>
        <nav>
          <ul>
            <li><a href="">
              <span>One</span>
              <span>Two</span>
            </a></li>
            <li><a href="">
              <span>One</span>
              <span>Two</span>
            </a></li>
            <li><a href="">
              <span>One</span>
              <span>Two</span>
            </a></li>
          </ul>
        </nav>
      </aside>
    </main>
  </body>

</html>
dagda1
  • 26,856
  • 59
  • 237
  • 450
  • 1
    you can simply use opacity, pointer-evnts and transform property instead of display property. because with display you cannot have animation unless you use css3 animation properties. – MJN Jun 30 '18 at 14:05
  • you might want yo check this https://stackoverflow.com/questions/13037637/css3-animation-and-display-none – MJN Jun 30 '18 at 14:07

0 Answers0