У меня есть несколько панелей, расположенных вне экрана с свойством translateY. Эти панели имеют разную высоту. Они обозначены эти идентификаторы:jQuery цепь нескольких пользовательских функций для запуска нескольких панелей
Panels:
#panel-search // search form
#panel-login // login form
#panel-register // registration form
#panel-navigation // navigation panel
Вся видимая сама страница является:
#page
И каждая панель запускается по своей ссылке:
Triggers:
.btn-search // trigger search panel
.btn-login // trigger login panel
.btn-register // trigger registration panel
.btn-nav // trigger navigation (this button shows only on mobile)
Также я использую data-target атрибут oon триггеров, который равен идентификатору целевой панели.
Что мне нужно:
- Нажатие любой
.btn-*вызовет соответствующую панель. Панель слайдов сверху вниз, слайды на панели страниц одновременно. Довольно просто. Готово. - При запуске любой панели он должен проверить, есть ли открытая панель (эта или любая другая). Если это так, выключите эту панель и тело страницы, и только после этого - покажите новую панель (и снова переместите тело в новую позицию). Вот где я застрял.
С помощью @GauravBarar я переписал код, и теперь все работает, кроме цепочки. Когда есть какая-либо открытая панель - я закрываю ее (и перемещаю страницу вверх), а затем открываю запрошенную панель. Но это происходит одновременно, одновременно. И мне нужно, чтобы открыть новую панель только после того, как оригинал закрыт. Пробовал добавить setTimeout() (см. Комментарий в коде) - #page перемещается вверх/вниз с этим таймаутом просто отлично, а панель - нет.
Вот мой код до сих пор:
/**
* Get real height of requested panel and prepare css transform property value.
*/
function getTransformProperty(panel) {
panelHeight = $('#'+panel).outerHeight();
property = 'translateY(' + panelHeight + 'px)';
return property;
}
/**
* Move #page down by requested panel's height
*/
function setTransformProperty(property) {
$('#page').css({
'-webkit-transform': property,
'-moz-transform': property,
'-ms-transform': property,
'-o-transform': property,
'transform': property
});
// Go to top (some triggers are in site footer, so we need this)
window.scrollTo(0, 0);
}
// Trigger panels
$('[class*=trigger-]').click(function(){
// Get target element to trigger
var target = $(this).attr('data-target');
// Check if current target is already opened and close it.
if($('#'+target).hasClass('is-visible-top')) {
$('#'+target).removeClass('is-visible-top'); // move up requested panel
setTransformProperty('translateY(0)'); // move up page
return false; // exit
}
// Check all panels in a loop. If any is opened - close it.
$('[id*=panel-]').each(function(){
// Get current panel's ID
curPanelID = $(this).attr('id');
if($('#'+curPanelID).hasClass('is-visible-top') && curPanelID !== target) {
// A panel is opened.
// Close it.
$('#'+curPanelID).removeClass('is-visible-top'); // move up currently open panel
setTransformProperty('translateY(0)'); // move up page
// Open requested panel (HERE WE NEED A TIMEOUT)
$('#'+target).addClass('is-visible-top'); // move down requested panel
setTransformProperty(getTransformProperty(target)); // move down page by new height
/* HERE'S TIMEOUT WHICH I TRIED BUT FAILED.
setTimeout(function(){
$('#'+target).addClass('is-visible-top');
setTransformProperty(getTransformProperty(target));
},300);
*/
// exit each loop
return false;
} else {
// No panel is opened. Just open requested without timeout.
setTransformProperty(getTransformProperty(target)); // move down page
$('#'+target).addClass('is-visible-top'); // move down requested panel
}
});
});
Любая помощь очень ценится.
Вы можете использовать функцию обратного вызова. Ссылка на [аналогичную проблему] (http://stackoverflow.com/questions/21692705/how-to-execute-a-javascript-jquery-function-only-after-the-completion-of-another) – Nomeaning25