Две функции oneclick?

Question

[realnin]

Имеется такие две функции
Как сделать эти функции в одной кнопке, чтобы при нажатии выполнялась 1 функция, при повторной нажатии 2 функция, далее опять 1 и так по кругу?

function OpenNewMenu() {

    $("#new_darkness").fadeIn(300);
    $("#new_menu_right").animate( { left:"0px"}, {queue:false, duration:160 }) // mmessage_block
                        .animate( { left:"0px"}, 300);
    $("#menu_open_button").animate( { opacity:"0.4"}, {queue:false, duration:160 }) // mmessage_block
                          .animate( { opacity:"0.4"}, 300);
    //$("body").attr("style");
    //$("body").attr("style", "overflow-y: hidden;");
}

function HideNewMenu() {

    //$("body").attr("style");
    //$("body").attr("style", "overflow-y: auto;");
    $("#new_darkness").fadeOut(300);
    $("#new_menu_right").animate( { left:"-320px"}, {queue:false, duration:160 }) // mmessage_block
                        .animate( { left:"-320px"}, 300);   
    $("#menu_open_button").animate( { opacity:"1"}, {queue:false, duration:160 }) // mmessage_block
                          .animate( { opacity:"1"}, 300);

Comments

[realnin]

$('#menu_open_button').on('click', function(){
var menu = $('#new_menu_right').toggleClass('hidden')
if (menu.hasClass('hidden')) {
OpenNewMenu()
} else {
HideNewMenu()
}
})

function OpenNewMenu() {

$("#new_darkness").fadeIn(300);
$("#new_menu_right").animate( { left:"0px"}, {queue:false, duration:160 }) // mmessage_block
.animate( { left:"0px"}, 300);
$("#menu_open_button").animate( { opacity:"0.4"}, {queue:false, duration:160 }) // mmessage_block
.animate( { opacity:"0.4"}, 300);
}

function HideNewMenu() {
$("#new_darkness").fadeOut(300);
$("#new_menu_right").animate( { left:"-320px"}, {queue:false, duration:160 }) // mmessage_block
.animate( { left:"-320px"}, 300);
$("#menu_open_button").animate( { opacity:"1"}, {queue:false, duration:160 }) // mmessage_block
.animate( { opacity:"1"}, 300);
}

в меню id="menu_open_button" но все еще не хочет работать..

Answer 1

[Stalker_RED]

Например так

$('#menu_open_button').on('click', function(){
  var menu = $('#new_menu_right').toggleClass('hidden')
  if (menu.hasClass('hidden')) {
    OpenNewmenu()
  } else {
    Hidenewmenu()
  }
})

Можно хранить состояние не в классе а в data- аттрибуте. Или ориентрироваться на текущие значения прозрачности или что там у вас. Но мне кажется удобнее с классом - таким образом еще и часть изменений внешнего вида можно сделать в css. А иногда и всё это можно сделать через css, и тогда в js останется только toggleClass!

Пример: jsfiddle.net/kdoxe06o

Comments

[realnin]

и как вызывать на кнопке? id="menu" не хочет работать

[Stalker_RED]

realnin: обновил код

[realnin]

$('#menu_open_button').on('click', function(){
var menu = $('#new_menu_right').toggleClass('hidden')
if (menu.hasClass('hidden')) {
OpenNewMenu()
} else {
HideNewMenu()
}
})

function OpenNewMenu() {

$("#new_darkness").fadeIn(300);
$("#new_menu_right").animate( { left:"0px"}, {queue:false, duration:160 }) // mmessage_block
.animate( { left:"0px"}, 300);
$("#menu_open_button").animate( { opacity:"0.4"}, {queue:false, duration:160 }) // mmessage_block
.animate( { opacity:"0.4"}, 300);
}

function HideNewMenu() {
$("#new_darkness").fadeOut(300);
$("#new_menu_right").animate( { left:"-320px"}, {queue:false, duration:160 }) // mmessage_block
.animate( { left:"-320px"}, 300);
$("#menu_open_button").animate( { opacity:"1"}, {queue:false, duration:160 }) // mmessage_block
.animate( { opacity:"1"}, 300);
}

в меню id="menu_open_button" но все еще не хочет работать..

[Stalker_RED]

realnin: Собрал работающий пример jsfiddle.net/kdoxe06o

[realnin]

Ошибка где-то у меня на странице оказывается, код копирую с точностью на свой сайт, но никак на кнопку не реагирует(

[Stalker_RED]

realnin: Откройте консоль в браузере (F12) и посмотрите ошибки.

[realnin]

Stalker_RED: ругается на строку $('#myButton').on('click', function(){

Uncaught TypeError: $(...).on is not a function(anonymous function) @ sss.js:20

[Stalker_RED]

realnin: у вас же jQuery подключен? Версия не очень старая?

[realnin]

ого, в жизни бы не подумал что в этом может быть проблема... обновил библиотеку, сразу заработало) спасибо огромное

[Stalker_RED]

realnin: Версия jQuery 1.7 вышла четыре года назад. :)

Answer 2

[Александр Зачиналов]

$('.mySelector').toggle(function() {
	OpenNewMenu()
}, function() {
	Hidenewmenu()
});

Comments

[realnin]

не совсем понятно как на кнопку вывести..

[Александр Зачиналов]

вместо .mySelector нужно написать селектор вашей кнопки (класс или id, который указан у самой кнопки)... в вашем случае это #menu_open_button как я понял

[realnin]

$('#menu_open_button').toggle(function() {
OpenNewMenu()
}, function() {
HideNewMenu()
});

function OpenNewMenu() {

$("#new_darkness").fadeIn(300);
$("#new_menu_right").animate( { left:"0px"}, {queue:false, duration:160 }) // mmessage_block
.animate( { left:"0px"}, 300);
$("#menu_open_button").animate( { opacity:"0.4"}, {queue:false, duration:160 }) // mmessage_block
.animate( { opacity:"0.4"}, 300);
}

function HideNewMenu() {
$("#new_darkness").fadeOut(300);
$("#new_menu_right").animate( { left:"-320px"}, {queue:false, duration:160 }) // mmessage_block
.animate( { left:"-320px"}, 300);
$("#menu_open_button").animate( { opacity:"1"}, {queue:false, duration:160 }) // mmessage_block
.animate( { opacity:"1"}, 300);
}

на кнопке вывожу

но все равно не хочет работать

[realnin]

id="menu_open_button"

[Александр Зачиналов]

и правда не пашет, не пойму почему, раньше помню пользовался этим... извините, придется вам через toggleClass делать тогда

[realnin]

$('#menu_open_button').on('click', function(){
var menu = $('#new_menu_right').toggleClass('hidden')
if (menu.hasClass('hidden')) {
OpenNewmenu()
} else {
Hidenewmenu()
}
}) ну так тоже не пашет(

[Александр Зачиналов]

jsfiddle.net/84qcLzb1

[realnin]

Александр Зачиналов: спасибо, ошибка где-то у меня на странице оказывается, код копирую с точностью на свой сайт, но никак на кнопку не реагирует(