Здравствуйте, как можно в данном коде сделать чтобы div выезжал? На данный момент при нажатий он резко появляется... Код (Javascript): function showHide(element_id) { if (document.getElementById(element_id)) { var obj = document.getElementById(element_id); if (obj.style.display != "block") { obj.style.display = "block"; } else{ obj.style.display = "none"; } } }
HTML: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle('300'); }); }); </script> </head> <body> <button>Toggle between hiding and showing the paragraphs</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html>
Чур меня, чур. Браузеры уже тысячу лет умеют в CSS3-transitions. Легкая нативная анимация, с аппаратным ускорением. Жиквери-анимации давно уже надо на свалку времен вынести. --- Добавлено --- Это потому, что ты переключаешь display. Это не анимируемое свойство объекта. Тут ничего не поделать. Надо делать через прозрачность или еще как угодно. Тольео не забудь выставить свойство transition у изменяемого объекта.
@Fell-x27, да. Я сам им пользуюсь. Но, мне почему то стало лень объяснять, и как любят все дал решение на этой библиотеке)).
Вот, чудеса современных технологий, без капли JS. https://jsfiddle.net/58kmfmss/ Надо мышку навести на красный див.
@Fell-x27, ага, с наведением все проще. Ну а если кликать, то уже нужен js. Даже если так, с transition все довольно просто получается сделать.
Я тя умоляю, просто то, что происходит в :hover вынести в обработчик клика. Это всяко не рассчитывание массива коэффициентов в соответствии с кривой, определяющей изменение скорости анимации, чтобы потом, по таймеру домнажать эти коэффициенты на текущее значение, разумеется, с учетом общей дельты. А ведь это именно то, что делает жиквери.