Нужна помощь в рефакторинге простого сценария анимации jquery
У меня есть окно сообщения о состоянии (блок div), расположенное в нижней части веб-страницы с использованием position: fixed; и внизу: 0 ;. Его высота изначально 11 пикселей.
Я хочу разрешить пользователям дважды щелкать по нему, когда сообщений о состоянии больше, чем может поместиться в пределах высоты по умолчанию, заставлять его расти. Если они дважды щелкните по нему еще раз или отведите указатель мыши от поля, он должен снова сжаться.
Мне удалось заставить это работать именно так, как я хочу, но мне кажется, что можно было бы написать это более элегантно:
<script type = "text/javascript">
$(document).ready(function() {
$("#footer").dblclick(showStatusBar);
});
function showStatusBar() {
var footer = $("#footer");
footer.unbind('dblclick', showStatusBar);
footer.animate({ height: "100px" }, 200);
footer.dblclick(hideStatusBar);
footer.bind('mouseleave', hideStatusBar);
}
function hideStatusBar() {
var footer = $("#footer");
footer.unbind('mouseleave', hideStatusBar);
footer.unbind('dblclick', hideStatusBar);
footer.animate({ height: "11px" }, 200);
footer.dblclick(showStatusBar);
}
</script>
Я поигрался с событием переключать, но не смог заставить его работать.
Я согласен с @Daan: Интернет ориентирован на один клик. Кнопки, ссылки и фокус ввода используются одним щелчком мыши. Переключение должно работать точно так же.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете создать одну функцию, которая действует как функция переключения. Что-то вроде этого:
// NOTE: Untested!
function statusBarToggle() {
/* Starts as hidden. */
if (this.isHidden == undefined)
this.isHidden = true;
this.isHidden = !this.isHidden;
var newHeight = this.isHidden ? 11 : 200;
$(this)
.stop()
.animate({ height: newHeight + 'px' }, 200);
/* When mouse leaves open status bar, close it. */
if (this.isHidden)
$(this).unbind('mouseleave', statusBarToggle);
else
$(this).bind('mouseleave', statusBarToggle);
}
$(document).ready(function() {
// ...
$('#footer').dblclick(statusBarToggle);
}
Это дает строке состояния свойство «isHidden» и использует его для проверки, показываем ли мы или скрываем строку состояния. Эта функция также работает с другими элементами, если вам это нужно.
(То, что вы можете связать многие команды jQuery, как я однажды сделал выше с помощью функций «остановить» и «оживить».)
В стороне, вы можете пересмотреть использование события DOUBLEclick. Трудно судить, не видя интерфейса, но на веб-страницах и в приложениях довольно редко используются двойные щелчки, поэтому люди могут не ожидать этого или осознавать, что это возможно в вашем приложении.