slideToggle() не анимация на слайд-шоу или вниз

Я работаю над выпадающим меню. Проблема в том, что при щелчке пункта меню, и меню должно скользить вниз, оно открывается с опозданием и не оживляет. Когда он должен скользить вверх, он также не оживляет.slideToggle() не анимация на слайд-шоу или вниз

$('.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>

источник

2015-05-13 muhaimin

Эмм, что означает "грубый" и "Lates" означает? – freefaller

см. Скрипку, которую вы поймете – muhaimin

lol, она отлично одета для меня – Aaron

Blockquote

Код отсутствует "$ (документ) .ready()" обработчик события.

$(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>

источник

2015-05-13 14:13:59

Забыл добавить функцию document.ready –

Не говорите, что в комментарии ... сделайте так, что ваш ответ ... иначе люди должны выяснить, что изменилось в коде – freefaller

@freefaller его там в моем коде –

Похоже, что проблема может быть конкурирующий переход в вашем CSS.

Также время слайда должно быть числом, а не строкой. Когда вы передаете строку, вы получаете заданное время по умолчанию 400 мс, а не 2000 мс, которое вы пытаетесь указать.

$('.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>

источник

2015-05-13 14:25:49 apaul

Я как раз собирался добавить комментарий к ответу Riteshk о переходе. Интересно о продолжительности. jQuery Doc говорит, что он должен принимать String или Number, но вы правы, что он использует значение по умолчанию при включенном String val. Похож на ошибку? – Daved

@Daved Он примет указанные строковые значения, такие как «медленный» или «быстрый» – apaul

А, коснитесь. Всегда используя int, я забыл, что вы можете сказать «быстро» или «медленно». ;) – Daved

menu-vertical .nav-menu li ul { 
 
    position: relative; 
 
    background: #f5f5f5 !important; 
 
    top: 0; 
 
    display: none; 
 
    transition: **background** .1s ease-in; 
 
}

вот мой код изменения для решения только в коде CSS.

здесь, в «переходный» вы написали «все», который содержит все элементы, прикрепленные с этим кодом, будет идти к переходу

сильного текст , как я знаю, что первый параметр перехода собственности некоторые css- чтобы вам просто нужно было пройти только те объекты, которые вы хотите

для получения более подробной информации, ссылаясь здесь на переходную собственность ниже.

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

источник

2015-05-14 04:30:07

slideToggle() не анимация на слайд-шоу или вниз

ответ

Смежные вопросы