Question

我正在尝试开发一个在用户点击按钮时显示的表单，并在用户点击表单外部时消失。

var app = {

init: function() {
    $("#button").on("click", function(){
        app.opaq();
        $("#button").off("click");
    });
},

opaq: function() {
    $("#overlay").css('z-index', '10000');
    $("#overlay").animate({
        opacity: 1  
    }, 500);    
    $(document).on("click", app.exitFunc);
},

exitFunc: function(e) {
    var gg = $("#overlay");
    var c = gg.css('opacity');
    if (c == 1 && !gg.is(e.target) && gg.has(e.target).length === 0) {
        app.fade();
        app.init();
    }
},

fade: function() {
    $("#overlay").animate({
        opacity: 0  
    }, 500).delay(50, function() {
        $("#overlay").css('z-index', '-10000')
    });
    $(document).off("click");        
},  

}

app.init();

当您第一次点击该按钮并通过单击其外部删除#overlay时，此方法可以正常工作。

但是，当您尝试再次单击该按钮使#overlay重新出现时，虽然正确调用了函数本身，但不会对不透明度进行动画处理。我觉得这个问题不是我使用.on()或.off()，但也许我错过了.animate()的内容？我不知道为什么它第一次运行但随后的点击不起作用。

Answer 1

我不使用animate，而是使用CSS过渡和jQuery toggleClass()。我创建了一个名为opaque的CSS类，它在0.5秒的过程中将不透明度设置为1。如果您点击HTML中除按钮或#overlay元素之外的任何内容，#overlay元素将变为透明。如果单击该按钮，则元素的不透明度将平滑切换。这不遵循您之前使用的代码结构，但它应该完成您要查找的内容。此外，您还可以向.opaque类添加属性以使其更改。

JavaScript的：

$("#button").click(function(e){
    e.stopPropagation();
    $("#overlay").toggleClass("opaque");    
});
$("#overlay").click(function(e){
    e.stopPropagation(); 
});
$("#container").click(function(){
    $("#overlay").removeClass("opaque");
});

CSS：

.opaque {
    opacity: 1 !important;
    transition: opacity .5s ease;
}

JSFiddle

Answer 2

注意，尝试将第二个参数替换为.delay(); String：queueName function。见.delay( duration [, queueName ] )。

.delay（duration [，queueName]）

持续时间类型：

整数整数   表示延迟执行下一个的毫秒数   队列中的项目。

queueName类型：

String包含名称的字符串   的队列。默认为fx，标准效果队列。

另外，从app.init();移除exitFunc，这似乎会在click设置额外的#button个事件？

var app = {

    init: function() {
        $("#button").on("click", function(){
            app.opaq();
        });
    },

    opaq: function() {
        $("#overlay").css('z-index', '10000');
        $("#overlay").fadeTo(500, 1, "linear"); 
        $("body *")
        .not("#overlay")
        .on("click.q", app.exitFunc);
    },

    exitFunc: function(e) {
        var gg = $("#overlay");
        var c = gg.css('opacity');
        if (c == 1 && !gg.is(e.target) && gg.has(e.target).length === 0) {
            app.fade();
        }
    },

    fade: function() {
        $("#overlay")        
        .fadeTo(500, 0, "linear", function() {
          $(this).css('z-index', '-10000')
        });

        $("body *")
        .not("#overlay").off("click.q")       
    },  

}

app.init();

jsfiddle http://jsfiddle.net/z4gavkfd/3/

Answer 3

您可以通过在文档上使用单击事件来简化逻辑，并确定点击的目标：

$(document).on('click', function(e) {
  var id= e.target.id;

  if(id==='button' || id==='overlay') {
    $('#overlay')
      .stop()
      .css('zIndex', 1)
      .animate({opacity: 1})
  }
  else {
    $('#overlay')
      .stop()
      .animate({opacity: 0},
               function() {$('#overlay').css('zIndex', -1)}
              );
  }
});

Fiddle

jQuery：使用.on（）和.off（）模拟切换时，动画不透明度不起作用

3 个答案: