Как заставить сработать условие, после добавление класса
Доброго времени суток. Проблема следующая: есть блок, изначально его позиция скрыта от визуального контакта right: -300, при клике, к блоку подключается class "mobile-menu--active", после чего его позиция должна равняться right: 0, но этого не происходит. Как исправить это, условие вроде написано правильно, но мне кажется оно срабатывает один раз и дальше не проверяется, как отследить добавление нового класса и проиграть условие повторно? Не судите строго, я только учусь:)
(function($) {
$.fn.mobileMenu = function(options) {
//Defaults to extend options
var settings = {
side: 'right',
width: 300,
animationSpeed: 600
};
//Extend those options
var options = $.extend(settings, options);
return this.each(function () {
var mob = $(this),
mobMenu = $('.mobile-menu');
mob.on('click touchend', function () {
if(mobMenu.is('.mobile-menu--active')) {
mobMenu.removeClass('mobile-menu--active');
$('.hamburger--active').removeClass('hamburger--active');
} else {
mobMenu.addClass('mobile-menu--active');
mob.addClass('hamburger--active');
}
return false;
});
/////// ANIMATION
var rightSide = 'mobile-menu--right-side',
leftSide = 'mobile-menu--left-side',
topSide = 'mobile-menu--top-side';
if(options.side == "right") {
mobMenu
.addClass(rightSide)
.css({"right": - options.width, "z-index" : 3});
if (mobMenu.is('mobile-menu--active')) {
mobMenu
.animate({"right": 0}, options.animationSpeed);
}
}
}); //each call
}; //mobileMenu plugin
})(jQuery);
|
Luther,
строки 29 - 30 перенести в начало строки 47, если не поможет, делайте макет. [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Перенес как вы сказали, не помогло, прикрепляю код, надеюсь все правильно сделал.
<!DOCTYPE html>
<html lang="ru">
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.hamburger {width: 20px;height: 20px;background-color: red}
.hamburger--active {background-color: green}
.mobile-menu {position: fixed;width: 100%;max-width: 300px;height: 100%; top: 0}
</style>
</head>
<body>
<div class="hamburger">
</div>
<div class="mobile-menu">
<h1>Заголовок блока</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Проектах знаках переулка курсивных снова журчит жизни все приставка безопасную!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
(function($) {
$.fn.mobileMenu = function(options) {
//Defaults to extend options
var settings = {
side: 'right',
width: 300,
animationSpeed: 600
};
//Extend those options
var options = $.extend(settings, options);
return this.each(function () {
var mob = $(this),
mobMenu = $('.mobile-menu');
mob.on('click touchend', function () {
if(mobMenu.is('.mobile-menu--active')) {
mobMenu.removeClass('mobile-menu--active');
$('.hamburger--active').removeClass('hamburger--active');
} else {
mobMenu.addClass('mobile-menu--active');
mob.addClass('hamburger--active');
}
return false;
});
/////// ANIMATION
var rightSide = 'mobile-menu--right-side',
leftSide = 'mobile-menu--left-side',
topSide = 'mobile-menu--top-side';
if(options.side == "right") {
mobMenu
.addClass(rightSide)
.css({"right": - options.width, "z-index" : 3});
if (mobMenu.is('mobile-menu--active')) {
mobMenu
.animate({"right": 0}, options.animationSpeed);
}
}
}); //each call
}; //mobileMenu plugin
})(jQuery);
$('.hamburger').mobileMenu({
});
</script>
</body>
</html>
|
Luther, у вас же не css анимация, а изменение класса, это асинхронное событие. Тогда сразу по смене класса и выполняйте анимацию:
(function($) {
$.fn.mobileMenu = function(options) {
var settings = {
side: 'right',
width: 300,
animationSpeed: 600
};
//Extend those options
var options = $.extend(settings, options);
return this.each(function () {
var mob = $(this),
mobMenu = $('.mobile-menu');
mob.on('click touchend', function () {
mobMenu.toggleClass('mobile-menu--active');
mob.toggleClass('hamburger--active');
mobMenu.animate({right: -options.width + mob.is('.hamburger--active') * options.width}, options.animationSpeed);
});
});
};
})(jQuery);
$('.hamburger').mobileMenu();
|
Цитата:
Оказывается это было проще, чем то что я варганил, спасибо большое за помощь, все работает |
Цитата:
<!DOCTYPE html>
<html lang="ru">
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.hamburger-button {width: 20px;height: 20px;background-color: red}
.hamburger--active {background-color: green}
.hamburger {
position: fixed;
top: 20px;
height: 100%;
display: none;
}
</style>
</head>
<body>
<div class="hamburger-button">
</div>
<div class="hamburger">
<h1>Заголовок блока</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Проектах знаках переулка курсивных снова журчит жизни все приставка безопасную!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
(function($) {
$.fn.mobileMenu = function(options) {
var settings = {
side: 'right',
width: 300,
animationSpeed: 600,
button: $('div.hamburger-button')
};
var options = $.extend(settings, options), mobMenu = $(this);
mobMenu.css({maxWidth: options.width, [options.side]: -options.width}).show(); //так определить в литеральном объекте свойство через переменную можно в ES6
return this.each(function () {
options.button.on('click touchend', function () {
options.button.toggleClass('hamburger--active');
//и только так определить в литеральном объекте свойство через переменную можно для старичков
var opt = {};
opt[options.side] = -options.width + options.button.is('.hamburger--active') * options.width;
mobMenu.animate(opt, options.animationSpeed);
});
});
};
})(jQuery);
$('div.hamburger').mobileMenu({side: 'left', width: 600});
</script>
</body>
</html>
|
:) потом будет вопрос как закрыть по клику вне меню.
|
рони, :D
|
Цитата:
Только щас увидел и чет не очень понятно, но я сделал следующем образом, если интересно:
<!DOCTYPE html>
<html lang="ru">
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.hamburger {width: 20px;height: 20px;background-color: red}
.hamburger--active {background-color: green}
.mobile-menu {position: fixed;height: 100%;top: 0;background-color: yellow}
.overlay {
left: 0;
width: 100%;
background-color: rgba(0,0,0,.4);
position: fixed;
top: 0;
height: 100%;
}
</style>
</head>
<body>
<div class="hamburger">
</div>
<div class="mobile-menu">
<h1>Заголовок</h1>
<p> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой lorem текста, первую ему ее, над родного. Если, алфавит ручеек коварный там города образ великий маленькая текстов вопроса он.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
(function($) {
$.fn.mobileMenu = function(options) {
//Defaults to extend options
var settings = {
side: 'left',
butClass: 'hamburger',
butClassActive: 'hamburger--active',
width: 300, // if puted (side: 'top'), there must be 100
zIndex: 99,
exit: true,
overlay: true,
animationSpeed: 400,
// afterChange: function(){}
};
//Extend those options
var options = $.extend(settings, options);
return this.each(function () {
var mob = $(this),
btn = $('.' + options.butClass),
mobMenu = $('.mobile-menu'),
mobMenuActive = 'mobile-menu--active';
var rightSide = 'mobile-menu--right-side',
leftSide = 'mobile-menu--left-side',
topSide = 'mobile-menu--top-side';
if (options.side == 'right') {
mobMenu.addClass(rightSide).css({right: -options.width, width: options.width, 'z-index': options.zIndex});
}
if (options.side == 'left') {
mobMenu.addClass(leftSide).css({left: -options.width, width: options.width, 'z-index': options.zIndex});
}
if (options.side == 'top') {
mobMenu.addClass(topSide).css({top: -options.width+'%', width: options.width+'%', 'z-index': options.zIndex});
}
function moveMenu() {
if (options.side == 'right') {
$('.' + rightSide).animate({right: -options.width + mob.hasClass(options.butClassActive) * options.width}, options.animationSpeed);
}
if (options.side == 'left') {
$('.' + leftSide).animate({left: -options.width + mob.hasClass(options.butClassActive) * options.width}, options.animationSpeed);
}
if (options.side == 'top') {
$('.' + topSide).animate({top: -options.width + mob.hasClass(options.butClassActive) * options.width+'%'}, options.animationSpeed);
}
}
if (options.overlay) {
if (options.overlay == "false") { return false; }
var directionalOverlayHTML = '<div class="overlay"></div>';
mobMenu.before(directionalOverlayHTML);
var bgOverlay = $('div.overlay');
bgOverlay.hide().css({'z-index': options.zIndex - 1});
}
mob.on('click touchend', function () {
mobMenu.stop().toggleClass(mobMenuActive);
btn.stop().toggleClass(options.butClassActive);
if (options.overlay) {
if(options.overlay == "false") { return false; }
if (mobMenu.hasClass(mobMenuActive)) {
if (btn.hasClass(options.butClassActive)) {
bgOverlay.fadeIn(options.animationSpeed);
bgOverlay.on('click touchend', function () {
mobMenu.stop().removeClass(mobMenuActive);
btn.stop().removeClass(options.butClassActive);
bgOverlay.fadeOut(options.animationSpeed);
moveMenu();
});
}
}
}
moveMenu();
});
if (options.exit) {
if(options.exit == "false") { return false; }
var directionalExitHTML = '<div class="mobile-menu-inner"><span class="mobile-menu__exit">exit</span></div>';
mobMenu.append(directionalExitHTML);
var exitBtn = mobMenu.children('div.mobile-menu-inner').children('span.mobile-menu__exit');
exitBtn.on('click touchend', function () {
mobMenu.stop().removeClass(mobMenuActive);
btn.stop().removeClass(options.butClassActive);
moveMenu();
if (options.overlay) {
if(options.overlay == "false") { return false; }
bgOverlay.fadeOut(options.animationSpeed);
}
});
}
$(document).keyup(function(esc) {
if (esc.keyCode === 27) {
if (mobMenu.hasClass(mobMenuActive)) {
if (btn.hasClass(options.butClassActive)) {
mobMenu.stop().removeClass(mobMenuActive);
btn.stop().removeClass(options.butClassActive);
moveMenu();
if (options.overlay) {
if(options.overlay == "false") { return false; }
bgOverlay.fadeOut(options.animationSpeed);
}
}
}
}
});
}); //each call
}; //mobileMenu plugin
})(jQuery);
$('.hamburger').mobileMenu();
</script>
</body>
</html>
[/quote]Да, я думаю код в некоторых местах некорректный, ну как получается, сейчас пытаюсь настроить анимацию так чтоб она не прыгала, при многократном нажатии, добавил .stop(), но работает не очень привлекательно, как можно сделать, чтоб анимация проигрывалась до конца, а не постоянно обрабатывалась? + еще надо , чтобы на .hamburger вешался класс .hamburger--active только после того как анимация проигралась, ну т.е. Зеленой, кнопка должна стать, только когда меню окончательно выдвинулось |
Зачем 'z-index': options.zIndex все время определять, а не единожды? Выполните для позиции лево/верх, и сразу будет виден баг. И почему вы упорно определяете кнопку управления как целевой объект для плагина вместо самого меню?
И лишнего много. |
| Часовой пояс GMT +3, время: 04:27. |