Question

我正在建立我们公司的简单广告网站，但由于我遇到问题，我决定请专业人士。

我希望为某些元素设置动画，并且首先在点击上有很多功能并且有两个阶段：active = 0（start）和active = 1（middle）。活动0是当你可以看到所有元素并且你可以点击一个，当你这样做时 - 它会做一些动画链并进入活动1当你可以看到单个元素的增强版本而其他元素消失了，当你再次点击它时它会去回到起始位置并开始活跃0。

问题是我想要添加mouseenter和mouseleave方面，但我只希望它发生在所有元素都处于活动状态0时，但它不起作用所以我想我需要一些处理器用于活动阶段可以用于所有函数的globaly虽然不知道怎么做。

这是我的点击功能：

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;
}
});

这是我写的mouseenter / leave代码：

    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);
    });
    }

所以现在为了工作，我认为我需要一些功能，如：

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
};

不知道怎么做，请提前感谢您的帮助：）

这是脚本的小提琴： http://jsfiddle.net/UvtJZ/

正如你所看到的，即使你点击框并且它增长，状态也会在1点击功能上改变，悬停功能仍允许你在它上面交换颜色

Answer 1

对于这种特殊情况，您可以使用$.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"});
});

检查这个工作http://jsfiddle.net/UvtJZ/2/

的小提琴

如何在jquery函数中存储变量的值以供全局使用

1 个答案: