0

I am working on a dropdown menu. The problem is that when the menu item is clicked and the menu should slide down, it opens late and doesn't animate. When it should slide up it also doesn't animate.

$('.menu-vertical .nav-menu > li').on('click', function(e) {
  e.preventDefault();
  $(this).find('ul').slideToggle('2000', 'swing');
});
.menu-vertical .nav-menu li ul {
  position: relative;
  background: #f5f5f5 !important;
  top: 0;
  display: none;
  transition: all .4s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="menu-vertical">
  <ul class="nav-menu">
    <li>this is head
      <ul>
        <li>this is one</li>
        <li>this is one</li>
        <li>this is one</li>
        <li>this is one</li>
      </ul>
    </li>
    <li>head is head</li>
    <li>head is head</li>
  </ul>
</nav>

12
  • it works fine for me in chrome May 13, 2015 at 14:12
  • The fiddle works fine for me as well. Is this just an excerpt from a larger code block? Is there a specific Browser + Version you are using as well?
    – Daved
    May 13, 2015 at 14:12
  • 1
    use 2000 instead of '2000' May 13, 2015 at 14:12
  • The fiddle works corretly for me - the first ul item is animating
    – pes502
    May 13, 2015 at 14:12
  • 1
    @JqueryKing We didnt know the real issue tell now .. but the '2000' in his code didnt make any effect .. I'm using chrome and 2000 make effect for me but '2000' didnt May 13, 2015 at 14:15

3 Answers 3

3

It looks like the problem may be a competing transition in your css.

Also the timing of the slide should be a number not a string. When passed as a string you're getting the default 400ms timing rather than the 2000ms timing you're trying to specify.

$('.menu-vertical .nav-menu > li').on('click', function(e) {
  e.preventDefault();
  $(this).find('ul').slideToggle(2000, 'swing'); // change '2000' to 2000
});
.menu-vertical .nav-menu li ul {
  position: relative;
  background: #f5f5f5 !important;
  top: 0;
  display: none;
  /*transition: all .4s ease; <- remove this bit*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="menu-vertical">
  <ul class="nav-menu">
    <li>this is head
      <ul>
        <li>this is one</li>
        <li>this is one</li>
        <li>this is one</li>
        <li>this is one</li>
      </ul>
    </li>
    <li>head is head</li>
    <li>head is head</li>
  </ul>
</nav>

4
  • I was just about to add a comment to Riteshk's answer about the transition. Interesting about the duration. jQuery Doc says it should accept String or Number, but you are correct that it's using default with String val supplied. Looks like a bug?
    – Daved
    May 13, 2015 at 14:29
  • @Daved It will accept specified string values like "slow" or "fast"
    – apaul
    May 13, 2015 at 14:33
  • Ah, touche. Always using an int, I forgot you can say "fast" or "slow". ;)
    – Daved
    May 13, 2015 at 14:37
  • duration (default: 400) Type: Number or String A string or number determining how long the animation will run. From the Bible May 13, 2015 at 14:40
1

The code is missing the $(document).ready() event handler.

$(document).ready(function() { //forgot this very important
  $('.menu-vertical .nav-menu > li').click(function(e) {
    e.preventDefault();
    $(this).find('ul').slideToggle(2000, 'swing');
  });
});
.menu-vertical .nav-menu li ul {
  position: relative;
  background: #f5f5f5 !important;
  top: 0;
  display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

<body>
  <nav class="menu-vertical">
    <ul class="nav-menu">
      <li>this is head
        <ul>
          <li>this is one</li>
          <li>this is one</li>
          <li>this is one</li>
          <li>this is one</li>
        </ul>
      </li>
      <li>head is head</li>
      <li>head is head</li>
    </ul>
  </nav>
</body>

</html>

12
  • Don't say that in the comment... make that your answer... otherwise people have to figure out what has changed in the code
    – freefaller
    May 13, 2015 at 14:14
  • Ah, good catch. The Fiddle is set to include in DomReady already. ;) Please edit your answer, though, so that it's clear what was added. It will make it easier for viewers.
    – Daved
    May 13, 2015 at 14:16
  • @Daved added it to the answer May 13, 2015 at 14:17
  • its there in my code - yes, but people would have to look for it... don't make people work, just tell them. Give example if necessary, but don't expect people to read line by line a whole load of code to find the one change
    – freefaller
    May 13, 2015 at 14:19
  • @muhaimin the functionality you want works ,unless you are expecting something else May 13, 2015 at 14:21
0

menu-vertical .nav-menu li ul {
  position: relative;
  background: #f5f5f5 !important;
  top: 0;
  display: none;
  transition: **background** .1s ease-in;
}
here is my change code for your solution in Only CSS code.

here in "transition" you have written "all" that contains all the element attached with this code will go for transition

strong text as i know the first parameter in transition property is some css-property so you just need to only transits only those property you want

for more detail giving you reference link here for transition property below.

http://www.kirupa.com/html5/all_about_css_transitions.htm

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.