jQuery - combining functions

Question

One that's been bugging me for a while. How would I combine these three sets of code together?

$(".fly-out-menu").toggle(
      function () {
        $('#page').animate({left: 250}, 'fast'); },
      function () {
        $('#page').animate({left: 0}, 'fast'); }
);
$(".fly-out-menu").toggle(
      function () {
        $('.sticky-container').animate({left: 250}, 'fast'); },
      function () {
        $('.sticky-container').animate({left: 0}, 'fast'); }
);
$(".fly-out-menu").toggle(
      function () {
        $('body').css('position','fixed') },
      function () {
        $('body').css('position','static') }
);

Thanks, R

toggle method is deprecated, there is no rule that prevents you from wrting more-than-one-line functions. — Ram
– Ram, Commented Dec 14, 2012 at 23:38
See the edit I just made. (Thank you @undefined for bringing this up) — aaaaaa
– aaaaaa, Commented Dec 14, 2012 at 23:54

aaaaaa · Accepted Answer · 2012-12-14 23:50:15Z

5

Like that?

$(".fly-out-menu").toggle(
    function(){
        $('#page, .sticky-container').animate({left: 250}, 'fast');
        $('body').css('position','fixed');
    },
    function(){
        $('#page, .sticky-container').animate({left: 0}, 'fast');
        $('body').css('position','static');
    }
);

As pointed out by @undefined, this event is now deprecated.
One way of handling this yourself would be:

$(".fly-out-menu").on("click", function(){
    var t = $(this);
    if(!t.data("alreadyclicked")){
        t.data("alreadyclicked", true);
        $('#page, .sticky-container').animate({left: 250}, 'fast');
        $('body').css('position','fixed');
    } else {
        t.data("alreadyclicked", false);
        $('#page, .sticky-container').animate({left: 0}, 'fast');
        $('body').css('position','static');
    }
});

edited Dec 14, 2012 at 23:50

answered Dec 14, 2012 at 23:40

aaaaaa

2,6283 gold badges27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John the Painter Over a year ago

Thanks for all your help. Seems odd that they would deprecate this, but hey ho.

ntgCleaner · Accepted Answer · 2012-12-14 23:40:30Z

1

You mean like this?

$(".fly-out-menu").toggle(
function () {
    $('#page').animate({left: 250}, 'fast'); 
    $('.sticky-container').animate({left: 250}, 'fast');
    $('body').css('position','fixed');
},
function () {
    $('#page').animate({left: 0}, 'fast');
    $('.sticky-container').animate({left: 0}, 'fast');
    $('body').css('position','static');
}
);

Or like this:

$(".fly-out-menu").toggle(
function () {
    $('#page, .sticky-container').animate({left: 250}, 'fast');
    $('body').css('position','fixed');
},
function () {
    $('#page, .sticky-container').animate({left: 0}, 'fast');
    $('body').css('position','static');
}
);

answered Dec 14, 2012 at 23:40

ntgCleaner

6,00510 gold badges54 silver badges87 bronze badges

Collectives™ on Stack Overflow

jQuery - combining functions

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related