Function revert with jquery

Question

I have a little question. Is there any possible to revert function with jquery? I have some click function with actions in the middle of it. Can i revert this elements to condition before click? Thx 4 help.

$('.bottom_panel_button_02').click(function(){
    $('#recipe_panel').css('opacity','1');
    $('.default_clock, .info_top_panel .random_title, .bottom_panel_button_06').css('display','none');
    $('.bottom_main_panel_button').css('background','url("img/ap_bottom_panel_button_white.png") center bottom no-repeat')
    setTimeout(function(){
        $('.arrow_up, .arrow_down').fadeIn(300);
    },500);
    $('.main_content, .oven_panel').fadeOut(200);
});

score 1 · Accepted Answer · answered Aug 09 '12 at 09:08

No, there is no built-in way to revert a bucnch of DOM manipulations/animations using jQuery. You'll have to write 2 functions which mirror each other and write the code associated:

function action(){
    $('#recipe_panel').css('opacity','1');
    $('.default_clock, .info_top_panel .random_title, .bottom_panel_button_06').css('display','none');
    $('.bottom_main_panel_button').css('background','url("img/ap_bottom_panel_button_white.png") center bottom no-repeat')
    setTimeout(function(){
        $('.arrow_up, .arrow_down').fadeIn(300);
    },500);
    $('.main_content, .oven_panel').fadeOut(200);    
}

function revert(){
    $('#recipe_panel').css('opacity','0');
    $('.default_clock, .info_top_panel .random_title, .bottom_panel_button_06').css('display','block');
    $('.bottom_main_panel_button').css('background','')
    setTimeout(function(){
        $('.arrow_up, .arrow_down').fadeOut(300);
    },500);
    $('.main_content, .oven_panel').fadeIn(200);    
}

$('.bottom_panel_button_02').click(action);
$('.someOtherButton').click(revert);

score 0 · Answer 2 · answered Aug 09 '12 at 08:59

0

You could do something like this using custom attributes:

$(document).ready(function() {
    $('.bottom_panel_button_02').attr("clicked", "false");

    $('.bottom_panel_button_02').click(function() {
        var clicked = $(this).attr("clicked");

        if (clicked == "false") {
            // do your click function

            $(this).attr("clicked", "true");
        } else {
            // do your revert function

            $(this).attr("clicked", "false");
        }
    });
});

Alternatively you could have a global variable / hidden input element that is set, instead of using attributes. You could also .addClass and .removeClass depending on the clicked state of the element and have your states in these CSS classes.

answered Aug 09 '12 at 08:59

Paul Aldred-Bann

5,840
4
36
55

yeah, i could do this but it's overwrite back all of the elements, i don't wanna do it that way... – Lukas Aug 09 '12 at 09:03
1

@ŁukaszBorawski in that case there is no straight "revert" function for the DOM you'd have to do this yourself. Another way you could achieve this is duplicating all "clickable" elements in your DOM in a hidden div with some ID and write your own revert which will just fetch the original element from the div and replace the clicked element with that copy, this will add a pretty hefty overhead to downloading your page though. – Paul Aldred-Bann Aug 09 '12 at 09:10
this is some kind of idea, but i thing the better way could be turn this all action away to natural condition - thx for interest – Lukas Aug 09 '12 at 09:53

Function revert with jquery

2 Answers2