How to store value of variable in jquery function for global use

Question

Im building simple advertisement site of our company but since im having problems i decided to ask proffesionalists.

i want to animate certain elements and at first ive witten function on click that does a lot of things and has two stages: active = 0 (start) and active = 1 (middle). Active 0 is when you can see all elements and you can click one, when you do - it does some animation chain and goes to active 1 when you can see enchanced version of single element and others are gone, when you click it again it goes back to starting position and reveives active 0.

the problem is i want to also add mouseenter and mouseleave aspects but i only want it to happen when all elements are up which is active 0, however it does not work so i figured that i need some handler for active stages that can be used globaly for all functions dont know how to do this though.

This is my click function:

var active = 0;
$(".item").on("click", function () {
  var checkDiv = $(this);
  var idDiv = checkDiv.attr("id");

if($("#"+idDiv).is(':animated')){
  return false;
}

if(active == 0) {
  $(".item").each(function() {
    if (idDiv != this.id) {
      $("#"+this.id).css({"z-index": "50"});
      $("#"+this.id).fadeOut(500);
    }
  });

  $("#"+idDiv).css({"z-index": "100"});

  var horizontal_stage1 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_5' || idDiv == 'item_6') ? "left" : "right";
  var vertical_stage1 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_3' || idDiv == 'item_4') ? "top" : "bottom";
  var properties_stage1 = {};
  properties_stage1[horizontal_stage1] = 300;
  properties_stage1[vertical_stage1] = 100;

  $("#"+idDiv).animate(properties_stage1, 500);

  var horizontal_stage2 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_5' || idDiv == 'item_6') ? "left" : "right";
  var vertical_stage2 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_3' || idDiv == 'item_4') ? "top" : "bottom";
  var properties_stage2 = {};
  properties_stage2[horizontal_stage2] = 200;
  properties_stage2[vertical_stage2] = 0;
  properties_stage2['width'] = 400;
  properties_stage2['height'] = 400;

  $("#"+idDiv).animate(properties_stage2, 500, function() {
    active = 1;
  });
}

if(active == 1) {
  var horizontal_stage2 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_5' || idDiv == 'item_6') ? "left" : "right";
  var vertical_stage2 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_3' || idDiv == 'item_4') ? "top" : "bottom";
  var properties_stage2 = {};
  properties_stage2[horizontal_stage2] = 310;
  properties_stage2[vertical_stage2] = 110;
  properties_stage2['width'] = 180;
  properties_stage2['height'] = 180;

  $("#"+idDiv).animate(properties_stage2, 500);

  var horizontal_stage1 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_5' || idDiv == 'item_6') ? "left" : "right";
  var vertical_stage1 = (idDiv == 'item_1' || idDiv == 'item_2' || idDiv == 'item_3' || idDiv == 'item_4') ? "top" : "bottom";
  var properties_stage1 = {};
  properties_stage1[horizontal_stage1] = (idDiv == 'item_1' || idDiv == 'item_4' || idDiv == 'item_5' || idDiv == 'item_8') ? 10 : 210;
  properties_stage1[vertical_stage1] = 10;

  $("#"+idDiv).animate(properties_stage1, 500);

  $(".item").each(function() {
    if (idDiv != this.id) {
      $("#"+this.id).fadeIn(500);
    }
  });
  active = 0;
}
});

This is my mouseenter/leave code that ive written:

    if(active == 0) { //THIS IS NOT WORKING beacuse active is handled in other function (above)
    $(".item").mouseenter(function() {
    $( this ).find("img").animate({ marginTop: '0px' }, 500);
    });

    $(".item").mouseleave(function() {
    $( this ).find("img").animate({ marginTop: '-180px' }, 500);
    });
    }

So now in order it to work i think i need some function like:

function is_active(store_active_stage, read_active_stage) {
    if get store active stage than 
        var active = store_active_stage 
    if read active stage
        return (previously stored) active
};

dont have clue how to do it, thank you for your help in advance:)

This is working Fiddle of the script: http://jsfiddle.net/UvtJZ/

as you can see even when you click box and it grows, status is changed on 1 whithin click function, hover function still allow you to swap color on it

ive read about it too, but dont know how to use it in that particular case — Mevia
– Mevia, Commented Feb 15, 2014 at 9:40
So basically you want to know if the previous action was active or not, right? — Maddy
– Maddy, Commented Feb 15, 2014 at 9:41

Maddy · Accepted Answer · 2014-02-15 10:37:07Z

1

For this particular case you can use $.data()

$(".item").on("click", function () {
  var checkDiv = $(this);
  var data =  checkDiv.data();   
  if(typeof data.active === 'undefined' || data.active == 0){
     // blah blah blah code         
     chheckDiv.data('active',1)
  }
  else if(data.active == 1){
     // blah blah blah code
     chheckDiv.data('active',0);
  }

}).mouseenter(function() {
 var data = $(this).data();
 if (typeof data.active === 'undefined' || data.active == 0)
   $(this).css({"background": "blue"});
}).mouseleave(function() {
  var data = $(this).data();
  if (typeof data.active === 'undefined' || data.active == 0)
  $(this).css({"background": "red"});
});

check this fiddle for working one http://jsfiddle.net/UvtJZ/2/

answered Feb 15, 2014 at 10:37

Maddy

8311 gold badge9 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

How to store value of variable in jquery function for global use

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related